Question

我试图更改图片列表的大小，以便它们的大小相同。图像大小需要为233像素×250像素，这可能意味着强制图像大于或小于其原始大小。目前，图像被裁剪为233像素×250像素，导致较大的原始照片在底部丢失内容。

下面是当前的css：

float: left;
max-width: 233px; 
max-height: 250px; 
width: auto; 
height: auto; 
border: 2px solid #333333;
margin: 0px 10px 0px 0px;
background: none repeat scroll 0% 0% #333333;
transition: all 0.25s ease 0s;
float: left;
overflow: hidden;
position: relative;

任何帮助？

Answer 1

尝试以下代码，使用div可能会解决您的问题：

HTML：

<div><img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">
</div>
<div><img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="">
</div>
<div>
  <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="">
</div>

CSS：

div {
  width: 233px;
  height: 255px;
}

img {
  width: 100%;
  height: 100%;
  padding: 1%;
  background: red;
}

JSFiddle：https://jsfiddle.net/nikdtu/gscerdLn/

Answer 2

指定 width和height ，如下所示。

img{

max-width: 233px; 
max-height: 250px; 
width: 233px; 
height: 250px; 
border: 2px solid #333333;
margin: 5px;
background: none repeat scroll 0% 0% #333333;
transition: all 0.25s ease 0s;
float: left;
overflow: hidden;
position: relative;
  }

<div>
  <img src="http://farm5.static.flickr.com/4005/4706825697_c0367e6dee_b.jpg" alt="">

<img src="https://farm4.staticflickr.com/3766/12953056854_b8cdf14f21.jpg" alt="">

  <img src="https://farm7.staticflickr.com/6092/6227418584_d5883b0948.jpg" alt="">
</div>

Answer 3

将width和height设置为100%而不是auto，如下所示：

width: 100%; 
height: 100%;

强制重建图像

3 个答案: