適合在col-xs-6裏面的圖像

Question

我試圖在每個col-xs-6盒子裏安裝平臺鞋子的4幅圖像，但是它們似乎不適合。

在我添加<h4>之前，col-xs-6與頁面的一側重疊，從而關閉整個頁面。

關於如何解決這個問題的任何想法。我希望<h4>也可以覆蓋。

<div id="meettheband"> 
<h4> MEET THE BAND </h4> 
    <div class="row"> 
    <div class="col-xs-6 nobby"> 
     <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive"> 

    </div> 

    <div class="col-xs-6 dave"> 

     <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive"> 

    </div> 

    </div> 

    <div class="row"> 
    <div class="col-xs-6 jammy"> 

     <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive"> 

    </div> 

    <div class="col-xs-6 dozy"> 

     <img src="/Users/Reece/Desktop/SLYDE_RESPONSIVE/img/GLAMPLATFORMS.jpg" width="400" height="400" class="img-responsive"> 

     </div> 

    </div> 

</div> 

#meettheband { 

    width: 100%; 
    height: auto; 
    background-color: black; 
    display: flex; 
} 

.col-xs-6 { 
    width: 50%; 
} 

.nobby { 
    border: solid red 1px; 

} 

.dave { 
    border: solid red 1px; 

} 

.jammy { 
    border: solid red 1px; 

} 

.dozy { 
    border: solid red 1px; 

} 

Answer 1

您的圖像具有內聯屬性，指定明確的寬度 - 寬度比列寬度寬。因此，設定一個最大寬度，在這些列結束的任何圖像將繞過這個overlfow：

.col-xs-6 img { 
    max-width: 100%; 
} 

#meettheband { 
 

 
    width: 100%; 
 
    height: auto; 
 
    background-color: black; 
 
    display: flex; 
 
} 
 

 
.col-xs-6 { 
 
    width: 50%; 
 
} 
 

 
.nobby { 
 
    border: solid red 1px; 
 

 
} 
 

 
.dave { 
 
    border: solid red 1px; 
 

 
} 
 

 
.jammy { 
 
    border: solid red 1px; 
 

 
} 
 

 
.dozy { 
 
    border: solid red 1px; 
 

 
} 
 

 
.col-xs-6 img { 
 
    max-width: 100%; 
 
}

<div id="meettheband"> 
 
<h4> MEET THE BAND </h4> 
 
    <div class="row"> 
 
    <div class="col-xs-6 nobby"> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive"> 
 

 
    </div> 
 

 
    <div class="col-xs-6 dave"> 
 

 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive"> 
 

 
    </div> 
 

 
    </div> 
 

 
    <div class="row"> 
 
    <div class="col-xs-6 jammy"> 
 

 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive"> 
 

 
    </div> 
 

 
    <div class="col-xs-6 dozy"> 
 

 
     <img src="https://placeholdit.imgix.net/~text?txtsize=38&txt=400%C3%97400&w=400&h=400" width="400" height="400" class="img-responsive"> 
 

 
     </div> 
 

 
    </div> 
 

 
</div>

如果你想保持相對的比例，只需添加height: auto到風格的規則。

Answer 2

您必須設置width或圖像的height採取容器的100％，例如：

.nobby img { 
    width: 100%; /* or height:100% */ 
} 

如果您需要保持在線的大小，即400px，當容器比大即：

.nobby img { 
    max-width: 100%; /* or max-height:100% */ 
} 

這將覆蓋內嵌的寬度和高度，你的img元素，在可能的情況設定，否則將採取容器的全尺寸。

保持設置，但過度擬合會保持圖像大小的另一種解決方案：這並不

.nobby { 
    overflow: hidden; 
}