ฉันจะปรับขนาดรูปภาพแบบไดนามิกด้วย CSS ได้อย่างไรเมื่อความกว้าง / ความสูงของเบราว์เซอร์เปลี่ยนไป

ฉันสงสัยว่าฉันจะปรับขนาดภาพพร้อมกับหน้าต่างเบราว์เซอร์ได้อย่างไรนี่คือสิ่งที่ฉันได้ทำไปแล้ว (หรือดาวน์โหลดทั้งไซต์ใน ZIP )

วิธีนี้ใช้งานได้ใน Firefox แต่มีปัญหาใน Chrome: รูปภาพไม่ได้ปรับขนาดเสมอไปทั้งนี้ขึ้นอยู่กับขนาดของหน้าต่างเมื่อโหลดหน้า

วิธีนี้ยังใช้งานได้ดีใน Safari แต่บางครั้งภาพจะโหลดด้วยความกว้าง / ความสูงต่ำสุด อาจจะเกิดจากขนาดภาพผมไม่แน่ใจ (ถ้าโหลดได้ก็ลองรีเฟรชหลาย ๆ ครั้งเพื่อดูบั๊ก)

มีความคิดอย่างไรที่ฉันจะทำให้กันกระสุนได้มากขึ้น? (หากจำเป็นต้องใช้ JavaScript ฉันก็สามารถใช้งานได้เช่นกัน แต่ควรใช้ CSS)

ซึ่งสามารถทำได้ด้วย CSS บริสุทธิ์และไม่จำเป็นต้องใช้แบบสอบถามสื่อ

เพื่อให้ภาพที่มีความยืดหยุ่นเพียงแค่เพิ่มและmax-width:100% height:autoรูปภาพmax-width:100%และใช้height:autoงานได้ใน IE7 แต่ไม่ใช่ใน IE8 (ใช่ข้อผิดพลาดแปลก ๆ ของ IE) ในการแก้ไขปัญหานี้คุณต้องเพิ่มwidth:auto\9IE8

แหล่งที่มา: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

CSS:

img {
    max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

และหากคุณต้องการบังคับใช้ความกว้างสูงสุดคงที่ของรูปภาพให้วางไว้ในคอนเทนเนอร์ตัวอย่างเช่น:

<div style="max-width:500px;">
    <img src="..." />
</div>

ตัวอย่าง JSFiddle ที่นี่ ไม่จำเป็นต้องใช้ JavaScript ใช้งานได้กับ Chrome, Firefox และ IE เวอร์ชันล่าสุด (ซึ่งทั้งหมดนี้ฉันได้ทดสอบแล้ว)

โซลูชันปี 2018 และใหม่กว่า:

การใช้หน่วยที่สัมพันธ์กับวิวพอร์ตควรทำให้วิถีชีวิตของคุณง่ายขึ้นเนื่องจากเรามีภาพลักษณ์ของแมว:

ตอนนี้เราต้องการให้แมวตัวนี้อยู่ในโค้ดของเราในขณะที่เคารพอัตราส่วนภาพ:

img {
  width: 100%;
  height: auto;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

จนถึงตอนนี้ไม่น่าสนใจ แต่ถ้าเราต้องการเปลี่ยนความกว้างของแมวให้เป็นสูงสุด 50% ของวิวพอร์ตล่ะ?

img {
  width: 100%;
  height: auto;
  /* Magic! */
  max-width: 50vw;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

ภาพเดียวกัน แต่ตอนนี้ จำกัด ให้กว้างสูงสุดของ50vw VW (= วิวพอร์ตกว้าง) หมายถึงภาพจะเป็น X ความกว้างของวิวพอร์ตขึ้นอยู่กับหลักที่มีให้ สิ่งนี้ยังใช้ได้กับความสูง:

img {
  width: auto;
  height: 100%;
  max-height: 20vh;
}

<img src="https://www.petmd.com/sites/default/files/petmd-cat-happy-10.jpg" alt="cat">

ซึ่งจำกัดความสูงของภาพไว้ที่ไม่เกิน 20% ของวิวพอร์ต

window.onresize = function(){
    var img = document.getElementById('fullsize');
    img.style.width = "100%";
};

ในonresizeเหตุการณ์IE จะเริ่มทำงานเมื่อมีการเปลี่ยนแปลงทุกพิกเซล (ความกว้างหรือความสูง) ดังนั้นอาจมีปัญหาด้านประสิทธิภาพ เลื่อนการปรับขนาดรูปภาพเป็นเวลาสองสามมิลลิวินาทีโดยใช้ window.setTimeout () ของ javascript

http://mbccs.blogspot.com/2007/11/fixing-window-resize-event-in-ie.html

ตั้งค่าคุณสมบัติการปรับขนาดเป็นทั้งสองอย่าง จากนั้นคุณสามารถเปลี่ยนความกว้างและความสูงได้ดังนี้:

.classname img{
  resize: both;
  width:50px;
  height:25px;
}

คุณใช้ jQuery หรือไม่?

เนื่องจากฉันค้นหาปลั๊กอิน jQuery อย่างรวดเร็วและดูเหมือนว่าจะมีปลั๊กอินบางตัวที่จะทำสิ่งนี้ให้ตรวจสอบสิ่งนี้ควรใช้งานได้:

http://plugins.jquery.com/project/jquery-afterresize

แก้ไข:

นี่คือโซลูชัน CSS ฉันแค่เพิ่มstyle = "width: 100%"และอย่างน้อยก็เหมาะกับฉันใน chrome และ Safari ฉันไม่มีเช่นดังนั้นเพียงทดสอบที่นั่นและแจ้งให้เราทราบนี่คือรหัส:

            <div id="gallery" style="width: 100%">
                <img src="images/fullsize.jpg" alt="" id="fullsize" />
                <a href="#" id="prev">prev</a>
                <a href="#" id="next">next</a>
            </div>

เริ่มแรกฉันใช้ html / css ต่อไปนี้:

img {
  max-width: 100%;
  height: auto;
  width: auto\9; /* ie8 */
}

<div> 
  <img src="..." />
</div>

จากนั้นฉันก็เพิ่มclass="img"สิ่ง<div> นี้:

<div class="img">
  <img src="..." />
</div>

และทุกอย่างเริ่มทำงานได้ดี

คุณสามารถใช้scaleคุณสมบัติCSS3 เพื่อปรับขนาดรูปภาพด้วย css:

.image:hover {
  -webkit-transform:scale(1.2); 
          transform:scale(1.2);
}
.image {
  -webkit-transition: all 0.7s ease; 
          transition: all 0.7s ease;
}

อ่านเพิ่มเติม :

• การแปลง CSS3 2D
• CSS3 Hover Effect Transitions, Transformations, Animations

เพียงแค่ใช้รหัสนี้ สิ่งที่ลืมไปมากที่สุดคือการระบุ max-width เป็นความกว้างสูงสุดของรูปภาพ

img {   
    height: auto;
    width: 100%;
    max-width: 300px;
}

ตรวจสอบการสาธิตนี้ http://shorturl.at/nBKVY

ลอง

.img{
   width:100vw; /* Matches to the Viewport Width */
   height:auto;
   max-width:100% !important;
}

ใช้งานได้กับบล็อกการแสดงผลและบล็อกแบบอินไลน์เท่านั้นสิ่งนี้ไม่มีผลกับรายการที่ยืดหยุ่นเนื่องจากฉันเพิ่งใช้เวลานานในการค้นหา