响应式网站图像高度相同

Question

我试图找出如何在同一高度制作垂直和水平图像。垂直图像所需的高度。任何想法..

我正在考虑制作相同的高度，但是当我调整大小时，显示如上所示......

css: max-height: 375px!important;

更新

http://jsfiddle.net/LG2B8/

Answer 1

将min-height用于水平图像

min-height: height of vertical image;

Answer 2

如上所述，请给出

  

css：身高：375px！important;

     

或

     

css：身高：4％0！重要; //给出有利于响应ui的百分比

一些基本规则是

• 身高 - 当您需要/知道适当的身高时适用
• 最大高度 - 适用于超出时想要限制图像高度的情况，这适用于图像，也可以用于所有其他内容。
• Min -height - 当你想要最小高度时应用，这用于div / table / tr / td用于响应ui

我纠正并且只改变css。只需删除所有内容并添加它。为理解我增加了宽度。

  

IMG

     

{

     

display：inline-block;

     

身高：300px;   宽度：200像素;
  }

img是html标记，所有图片都将按照“img”css属性工作

Answer 3

这是我的解决方案：

HTML：

<div class="w">
    <div class="img"><img src="http://i.imgur.com/4OAz0Cf.jpg"/></div>
    <div class="img o"><img src="http://i.imgur.com/EJsmCmT.jpg"/></div>
</div>

的CSS：

.w {
    display: table-row;
}

.img{
    width: 50%;
 display: table-cell;
}
.img img{
    min-height: 500px;
    max-height: 500px;
}
.img.o img {
    width: 100%;

}

的 Example