Cara mengontrol lebar elemen induk gambar dengan CSS

dalam tata letak desain yang lancar, saya ingin menskalakan gambar sehingga semuanya memiliki tinggi yang sama tetapi dapat memiliki lebar yang bervariasi tergantung pada rasio aspek gambar. Selain itu, semua gambar berada di dalam tag jangkar. Di browser Mozilla saya mendapatkan masalah dimana lebar tag jangkar tidak menyesuaikan secara otomatis. Misalnya, jika gambar memiliki dimensi 200x100px dan tinggi tag jangkar adalah 50px maka di Mozilla tag jangkar akan memiliki dimensi 200x50px, dan bukan 100x50px seperti yang saya inginkan. Apa yang harus dilakukan CSS saya untuk memperbaikinya? Terima kasih

HTML saya adalah:

<a class="testimage"><img src="sliderimages/picture8.jpg"/></a>

CSSnya adalah:

<style>  
    .testimage {height:10%;display:inline-block;border:1px solid yellow;}
    .testimage img {height:100%;}
</style>

css width fluid-layout
person lekso    schedule 10.03.2013    source sumber
comment
Bisakah Anda menyertakan contoh di jsfiddle?   -  person Amy    schedule 10.03.2013
comment
Silakan juga posting gambarnya di sini.. (atau proporsi yang sama dengan gambar lainnya)   -  person Mr_Green    schedule 10.03.2013

Jawaban (2)


arrow_upward
0
arrow_downward

Anda perlu melakukan beberapa perhitungan sederhana dengan JavaScript. Berikut halaman HTML sederhana dengan JavaScript untuk Anda modifikasi dan uji.

<!DOCTYPE html>
<html>
<head>
    <title>
        Set Image Height
    </title>
</head>

<body>
    <img src='testimage1.jpg' onload='setImageHeight()'>
    <img src='testimage2.png' onload='setImageHeight()'>

    <script>
        function setImageHeight(event) {
            // Allow for cross-platform differences
            event = event || this.event;
            element = event.target || event.srcElement;

            var temp = new Image(),
                fixedHeight = 50,
                height, width, scaledWidth;

            temp.src = element.src;
            width = temp.width;
            height = temp.height;
            scaledWidth = width * fixedHeight / height;

            element.style.width = scaledWidth + "px";
            element.style.height = fixedHeight + "px";
        }
    </script>
</body>
</html>

Berikut contoh.

person James Newton    schedule 10.03.2013
comment
Hai James, saya ingin mengetahui cara melakukan ini di CSS. Javascript bukanlah suatu pilihan dalam kasus ini - person lekso; 10.03.2013
comment
CSS bukanlah bahasa pemrograman. Itu tidak memungkinkan Anda membuat perhitungan apa pun. Saya dapat memikirkan tiga alternatif. (1) Anda menggulung CSS dengan tangan untuk setiap gambar sesuai dengan dimensinya (2) Anda membuat deklarasi gaya CSS dengan cepat menggunakan PHP atau kode sisi server lainnya (3) Anda membuat gambar (thumbnail) untuk ditampilkan di terbang sehingga ukurannya sesuai dengan yang Anda inginkan. - person James Newton; 10.03.2013

arrow_upward
0
arrow_downward

Coba ini .... setel .testimage ke display: block; Untuk menentukan tinggi atau lebar tag, Anda harus menerapkan tampilan ke blok, bukan blok sebaris. Semoga ini berhasil.

person Bhojendra Rauniyar    schedule 10.03.2013