Html 如何保持响应式图像的高度相同？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28132842/
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 keep responsive images same height?
提问by singmotor
I have a webpage that I'm making, and I have one row with a cover photo and profile picture side-by side. I have them both in a bootstrap row in different-sized grids. But, the profile picture is always extending lower than the cover photo (it's height is larger). How do I keep them responsive, but the same height? My ultimate goal is have them look like a single strip (with padding between), and then stack when window is mobile-sized.
我有一个正在制作的网页，我有一排并排显示封面照片和个人资料图片。我将它们都放在不同大小网格的引导行中。但是，个人资料图片总是比封面照片低（它的高度更大）。我如何让它们反应灵敏，但高度相同？我的最终目标是让它们看起来像一个单一的条带（中间有填充），然后在窗口为移动大小时堆叠。
<div class="row">
<div class="col-lg-8">
<img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
</div>
<div class="col-lg-4">
<img src="http://placehold.it/200x200" class="img-responsive" alt="Profile Picture">
</div>
</div>
I have tried restricting the height of the row div, setting it to a specific height, and switching up the bootstrap grid to be col-md, or col-sm in different proportions. Any wisdom is much appreciated.
我尝试限制行 div 的高度，将其设置为特定高度，并将引导网格切换为 col-md 或 col-sm 的不同比例。任何智慧都非常感谢。
采纳答案by Dom Adams
use min-height on them
对它们使用 min-height
try
尝试
img {
min-height:100%
}
if that doesn't work use a fixed max-height
如果这不起作用，请使用固定的最大高度
img {
min-height:4em;
}
回答by Iqbal
You can use following codes.
您可以使用以下代码。
HTML
HTML
<div class="row cover-row">
<div class="col-sm-8">
<img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
</div>
<div class="col-sm-4 profile-wrap">
<img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture">
</div>
</div>
CSS
CSS
/* Desktop and Tablet Screens */
@media (min-width:768px) {
.cover-row {
position: relative;
min-height: 100px; /* minimum height of cover stripe */
}
.profile-wrap {
position: absolute;
right: 0;
top: 0;
height: 100%;
overflow: hidden;
}
.profile-pic {
width: auto; /* maintain width/height aspect ratio */
height: 100%;
}
}
JSFiddle link http://jsfiddle.net/feh4ex3p/
JSFiddle 链接http://jsfiddle.net/feh4ex3p/
回答by epv
None of the above worked for me, but this did:
以上都不适合我，但这样做了：
HTML
HTML
<div class="row cover-row">
<div class="col-sm-8">
<img src="http://placehold.it/851x315" class="img-responsive" alt="Cover Photo">
</div>
<div class="col-sm-4 profile-wrap">
<img src="http://placehold.it/200x200" class="img-responsive profile-pic" alt="Profile Picture">
</div>
CSS
CSS
.profile-pic {
width: 100%; /* maintain width/height aspect ratio */
height: 500px; /*I realized this doesnt seem responsive, but no percentages work for me but it appears fine on mobile*/
}
