วิธีสร้างภาพที่ตอบสนองที่ปรับขนาดใน Bootstrap 3

ฉันกำลังใช้ twitter bootstrap 3 และฉันกำลังประสบปัญหาในการสร้างภาพที่ตอบสนอง ฉันได้ใช้img-responsiveคลาส แต่ขนาดภาพไม่ได้สเกลขึ้น ถ้าฉันใช้width:100%แทนmax-width:100%มันก็ทำงานได้อย่างสมบูรณ์ ปัญหาอยู่ที่ไหน นี่คือรหัสของฉัน:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

คลาสอิมเมจที่ตอบสนองของ Bootstrap ตั้งค่าmax-widthเป็น 100% ซึ่งจะ จำกัด ขนาด แต่ไม่บังคับให้ยืดออกเพื่อเติมองค์ประกอบหลักที่มีขนาดใหญ่กว่าภาพ คุณต้องใช้widthแอตทริบิวต์เพื่อบังคับให้เพิ่มขนาด

http://getbootstrap.com/css/#images-responsive

ของแน่!

.img-responsive เป็นวิธีที่ถูกต้องในการสร้างภาพที่ตอบสนองด้วย bootstrap 3 คุณสามารถเพิ่มกฎความสูงสำหรับรูปภาพที่คุณต้องการทำให้ตอบสนองได้เพราะด้วยความรับผิดชอบความกว้างจะเปลี่ยนไปตามความสูงแก้ไขและอยู่ที่นั่น

ไม่แน่ใจว่ามันช่วยคุณได้ไหม ... แต่ฉันต้องทำเคล็ดลับเล็ก ๆ น้อย ๆ เพื่อทำให้ภาพใหญ่ขึ้น แต่ยังคงตอบสนองต่อไป

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

หวังว่าจะช่วยให้ PS ความกว้างสูงสุดเป็นอะไรก็ได้ที่คุณต้องการ

หากการตั้งค่าความกว้างคงที่บนรูปภาพไม่ใช่ตัวเลือกนี่เป็นทางเลือกอื่น

การมี div พาเรนต์พร้อม display: table & table-layout: fixed จากนั้นตั้งค่ารูปภาพให้แสดง: เซลล์ตารางและความกว้างสูงสุดเป็น 100% ด้วยวิธีนี้รูปภาพจะพอดีกับความกว้างของพาเรนต์

ตัวอย่าง:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

ซอ: http://jsfiddle.net/5y62c4af/

ลองทำสิ่งต่อไปนี้ในสไตล์ชีท CSS ของคุณ:

.img-responsive{
  max-width: 100%;
  height: auto;
}

ลองทำดู:

1) ใน index.html ของคุณ

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) ในสไตล์ของคุณ css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

ฉันพบว่าคุณสามารถใส่คลาส. col ลงในรูปภาพได้จะทำเคล็ดลับ - อย่างไรก็ตามสิ่งนี้ทำให้มันมีช่องว่างเพิ่มเติมพร้อมกับคุณสมบัติอื่น ๆ ที่เกี่ยวข้องกับคลาสเช่น float left อย่างไรก็ตามสิ่งเหล่านี้สามารถยกเลิกได้โดยพูดเช่น no padding คลาสเป็นการเพิ่มเติม

ฉันเดาว่าภาพเสียหายมากกว่า ตัวอย่าง: ขนาดรูปภาพ 195px X 146px

มันจะทำงานภายในความละเอียดต่ำเช่นแท็บเล็ต เมื่อคุณมีความละเอียด 1280 X 800 จะบังคับให้ใหญ่ขึ้นเนื่องจากมีความกว้าง 100% บางที CSS ภายในแบบสอบถามสื่อเช่นแบบอักษรไอคอนเป็นทางออกที่ดีที่สุด