Html 使用引导响应式网格系统时如何为图像提供动态宽度和高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23771952/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to give image a dynamic width and height when using bootstrap responsive grid system
提问by adit
I am using bootstrap's grid system and here's my website. The issue is that on initial load the item card looks pretty crappy like this:
我正在使用引导程序的网格系统，这是我的网站。问题是在初始加载时，物品卡看起来很糟糕，如下所示：
and here's what it looks like after it loads:
这是加载后的样子：
As you can see the issue is because I am not supplying the image's width and height and hence before it load I am seeing this weird layout which is not good. The issue why I am not supplying a width and height is because this is responsive, such that when I resize the width of the browser then the width of the card also changes, and hence supplying a constant width and height doesn't work. What's the best solution out of this?
正如您所看到的，问题是因为我没有提供图像的宽度和高度，因此在加载之前我看到了这种奇怪的布局，这并不好。为什么我不提供宽度和高度的问题是因为这是响应性的，这样当我调整浏览器的宽度时，卡片的宽度也会改变，因此提供恒定的宽度和高度不起作用。最好的解决方案是什么？
回答by Chihung Yu
You can calculate your image ratio if it's known then set its padding to the ratio
如果已知，您可以计算图像比例，然后将其填充设置为比例
Check out the js fiddle:
查看 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%;
}
So if your image has width 2197 pixels and height 1463 pixels
因此，如果您的图像宽度为 2197 像素，高度为 1463 像素
then set the container that contain the image to have padding-top 1463/2197*100% then set your image to position absolute now your image can be responsive and worry free of collapsing container
然后将包含图像的容器设置为 padding-top 1463/2197*100% 然后将图像设置为绝对位置现在您的图像可以响应并且无需担心容器折叠
回答by Shawn Taylor
You need to put your thumbnails in a dynamically sized container, whose height is proportional to it's width. You can do this by matching widthand padding-bottomon the container, as well as a few other specifics as in the Bootply and example below:
您需要将缩略图放在一个动态大小的容器中，其高度与其宽度成正比。您可以通过在容器上匹配width和padding-bottom以及以下 Bootply 和示例中的其他一些细节来做到这一点：
Example:
例子：
CSS:
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:
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>
You'll notice that in the last thumbnail, even though there is no file loaded, the container is square. This is the key that will fix your specific issue.
您会注意到在最后一个缩略图中，即使没有加载文件，容器也是方形的。这是解决您的特定问题的关键。
Note:matching padding-bottomto widthwill give you a square thumbnail container, but you can make it any proportion you want, by adjusting the padding-bottom %.
注意：匹配padding-bottom到width将为您提供一个方形缩略图容器，但您可以通过调整padding-bottom %.
Note2:because you haven't shared your code, you'll probably have to do a bunch of class renaming and testing to get this to work. I had to guess at your setup based on what I saw on your site. Hope it helps!
注意2：因为您还没有共享您的代码，您可能需要进行大量的类重命名和测试才能使其正常工作。我不得不根据我在您网站上看到的内容来猜测您的设置。希望能帮助到你！
回答by Joe
If you're working with images that are all the same size, you can set a min-height on the image element for each step of the responsive page. You would have to find out how tall the images are at each step of the responsive page design, but it could look something like this:
如果您正在处理大小相同的图像，则可以为响应式页面的每个步骤在图像元素上设置最小高度。您必须在响应式页面设计的每个步骤中找出图像的高度，但它可能看起来像这样：
.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;
}
}
回答by kundan Karn
As far as I understand your question you want the image to auto adjust when the browser is resized. We can achieve this using the css below.
据我了解您的问题，您希望在调整浏览器大小时自动调整图像。我们可以使用下面的 css 来实现这一点。
.image-box img {
width: 100%;
}
If we only specify the width of the image the height will be auto calculated. It will maintain the aspect ratio for the image. Width 100% will exactly fit the container of the image. This code may not work for background image.
如果我们只指定图像的宽度，高度将自动计算。它将保持图像的纵横比。宽度 100% 将完全适合图像的容器。此代码可能不适用于背景图像。
回答by Kisspa
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
回答by Wissam El-Kik
Your problem is that at load time, the imghas a height=0 and width=100%. So, you have an empty image when the page loads.
您的问题是在加载时，img高度=0，宽度=100%。因此，当页面加载时，您有一个空图像。
You can consider using an Image Preloader:
您可以考虑使用图像预加载器：
If you want all the images to have the same height, then use the Fake CropjQuery plugin. Actually, it doesn't crop the image file, but the image gets a "cropped" effect using CSS Positioning properties.
如果您希望所有图像具有相同的高度，请使用Fake CropjQuery 插件。实际上，它不会裁剪图像文件，而是使用 CSS 定位属性使图像获得“裁剪”效果。
Also, you can assign a min-heightto the container:
此外，您可以将 a 分配min-height给容器：
.product-view .img-responsive {min-height:352px; background:#fff;}
You can also look into Lazy Loading:
您还可以查看延迟加载：
