[英]how to give image a dynamic width and height when using bootstrap responsive grid system
我正在使用bootstrap的網格系統,這是我的網站 。 問題是,在初始加載時,項目卡看起來很糟糕,如下所示:
這是加載后的樣子:
你可以看到問題是因為我沒有提供圖像的寬度和高度,因此在加載之前,我看到這種奇怪的布局並不好。 我沒有提供寬度和高度的問題是因為這是響應性的,因此當我調整瀏覽器的寬度時,卡的寬度也會改變,因此提供恆定的寬度和高度不起作用。 什么是最好的解決方案?
如果已知,則可以計算圖像比率,然后將其填充設置為比率
看看js小提琴:
<div class="img-container">
<img src="">
</div>
.img-container {
position:relative;
padding-top:66.59%;
}
img {
position: absolute;
top: 0;
left: 0;
width:100%;
}
因此,如果您的圖片寬度為2197像素,高度為1463像素
然后將包含圖像的容器設置為padding-top 1463/2177 * 100%然后將圖像設置為絕對位置,現在您的圖像可以響應並且無需折疊容器
您需要將縮略圖放在動態大小的容器中,容器的高度與其寬度成正比 。 您可以通過匹配容器上的width
和padding-bottom
以及Bootply和下面的示例中的一些其他細節來完成此操作:
例:
CSS:
.thumbnail_container {
position: relative;
width: 100%;
padding-bottom: 100%; <!-- matching this to above makes it square -->
float:left;
}
.thumbnail {
position:absolute;
width:100%;
height:100%;
}
.thumbnail img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
img{
max-height:100%;
max-width:100%;
}
HTML:
<div class="container-fluid"> <!-- this makes your images scale constantly, between breakpoints as welll. removing -fluid makes then jump in size at breakpoints -->
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/400x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x600">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="http://placehold.it/600x400">
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="thumbnail_container">
<div class="thumbnail">
<img src="no-photo" /> <!-- No Photo, but it still scales -->
</div>
</div>
</div>
你會注意到在最后一個縮略圖中,即使沒有加載文件,容器也是方形的。 這是解決您具體問題的關鍵。
注意:匹配padding-bottom
到width
將為您提供方形縮略圖容器,但您可以通過調整padding-bottom %
來使其成為您想要的任何比例。
注意2:因為您還沒有共享代碼,所以您可能需要進行一系列的類重命名和測試才能使其正常工作。 根據我在您網站上看到的內容,我不得不猜測您的設置。 希望能幫助到你!
如果您正在處理大小相同的圖像,則可以為響應頁面的每個步驟在圖像元素上設置最小高度。 您必須在響應式頁面設計的每個步驟中找出圖像的高度,但它可能看起來像這樣:
.item-card img {
min-height: 100px;
}
// Small screen
@media (min-width: 768px) {
.item-card img {
min-height: 150px;
}
}
// Medium screen
@media (min-width: 992px) {
.item-card img {
min-height: 200px;
}
}
// Large screen
@media (min-width: 1200px) {
.item-card img {
min-height: 250px;
}
}
據我所知,您希望在調整瀏覽器大小時自動調整圖像。 我們可以使用下面的css來實現這一點。
.image-box img {
width: 100%;
}
如果我們只指定圖像的寬度,則將自動計算高度。 它將保持圖像的寬高比。 寬度100%將完全適合圖像的容器。 此代碼可能不適用於背景圖像。
use bootstrap or @media queries
/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }
/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }
/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }
We occasionally expand on these media queries to include a max-width to limit CSS to a narrower set of devices.
@media (max-width: @screen-xs-max) { ... }
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }
@media (min-width: @screen-lg-min) { ... }
http://getbootstrap.com/css/#grid
你的問題是在加載時, img
的高度= 0,寬度= 100%。 因此,頁面加載時您有一個空圖像。
您可以考慮使用Image Preloader:
如果您希望所有圖像具有相同的高度,請使用Fake Crop jQuery插件。 實際上,它不會裁剪圖像文件,但使用CSS定位屬性可以使圖像獲得“裁剪”效果。
此外,您可以為容器指定min-height
:
.product-view .img-responsive {min-height:352px; background:#fff;}
您還可以查看延遲加載:
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.