วิธีควบคุมความกว้าง CSS ขององค์ประกอบหลักของรูปภาพ

ในเลย์เอาต์การออกแบบที่ไหลลื่น ฉันต้องการปรับขนาดรูปภาพเพื่อให้รูปภาพทั้งหมดมีความสูงเท่ากัน แต่อาจมีความกว้างที่แตกต่างกันได้ ขึ้นอยู่กับอัตราส่วนภาพของรูปภาพ นอกจากนี้ รูปภาพทั้งหมดจะอยู่ภายในแท็ก Anchor ในเบราว์เซอร์ Mozilla ฉันประสบปัญหาที่ความกว้างของแท็ก Anchor ไม่ปรับโดยอัตโนมัติ ตัวอย่างเช่น หากรูปภาพจะมีขนาด 200x100px และความสูงของแท็ก Anchor จะเท่ากับ 50px ดังนั้นใน Mozilla แท็ก Anchor จะมีขนาด 200x50px และไม่ใช่ 100x50px ตามที่ฉันต้องการ CSS ของฉันควรเป็นอย่างไรเพื่อแก้ไขปัญหานี้ ขอบคุณ

HTML ของฉันคือ:

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

ซีเอสเอสคือ:

<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 แหล่งที่มา
comment
คุณสามารถรวมตัวอย่างใน jsfiddle ได้ไหม   -  person Amy    schedule 10.03.2013
comment
กรุณาโพสต์ภาพที่นี่ด้วย.. (หรือสัดส่วนเดียวกันกับภาพอื่น ๆ )   -  person Mr_Green    schedule 10.03.2013

คำตอบ (2)


arrow_upward
0
arrow_downward

คุณต้องทำการคำนวณง่ายๆ ด้วย JavaScript นี่คือหน้า HTML ธรรมดาพร้อม JavaScript ให้คุณแก้ไขและทดสอบ

<!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>

นี่คือตัวอย่าง

person James Newton    schedule 10.03.2013
comment
สวัสดีเจมส์ ฉันต้องการทราบวิธีการทำเช่นนี้ใน CSS Javascript ไม่ใช่ตัวเลือกในกรณีนี้ - person lekso; 10.03.2013
comment
CSS ไม่ใช่ภาษาการเขียนโปรแกรม ไม่อนุญาตให้คุณทำการคำนวณใด ๆ ฉันนึกถึงทางเลือกได้สามทาง (1) คุณหมุน CSS ด้วยมือสำหรับแต่ละภาพตามขนาด (2) คุณสร้างการประกาศสไตล์ CSS ได้ทันทีโดยใช้ PHP หรือโค้ดฝั่งเซิร์ฟเวอร์อื่น ๆ (3) คุณสร้างภาพ (ภาพขนาดย่อ) เพื่อแสดงผลบน บินเพื่อให้มีขนาดที่คุณต้องการให้ปรากฏอยู่แล้ว - person James Newton; 10.03.2013

arrow_upward
0
arrow_downward

ลองสิ่งนี้ .... ตั้งค่า .testimage เป็น display: block; หากต้องการระบุความสูงหรือความกว้างของแท็ก คุณควรใช้ display เพื่อบล็อกไม่ใช่บล็อกแบบอินไลน์ หวังว่ามันจะได้ผล

person Bhojendra Rauniyar    schedule 10.03.2013