Question

我正在访问包含不同产品图片的API。遗憾的是，这些图像并不总是相同的尺寸。我想以250x250 div显示它们。

因此，有时图像是纵向的，图像应根据高度（不填充整个250px宽度）进行缩放。有时它是风景，应该按比例缩放到宽度（不是填满整个250px）。

老实说，我不知道如何做到这一点（使用CSS - 如果可能的话），所以任何帮助都表示赞赏。

感谢。

修改在评论中提到它重复问题：Scale image with css to both width and height to scale确实存在重叠 - 但是我没有在这个问题上找到满意的答案（对于我的理解）。

Answer 1

听起来您希望使用background-image应用图片并向其提供background-size: contain：

.product-img {
  width: 250px;
  height: 250px;
  background-image: url(path/to/image);
  background-size: contain;
}

Answer 2

使用背景图片的其他答案，文档在这里contain https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

如果您必须使用图像并且无法使用背景图像，或者您希望html中的图像标签用于更好的搜索引擎优化，请使用以下内容。通过将最大宽度和高度都设置为250px，它可以自动调整图像大小。一旦其中一个尺寸达到250

，它将停止施胶

.test1 {background: blue;}
.test2 {background: green;}

.test2 img,
.test1 img{
  max-width: 250px;
  max-height: 250px;

}
.test1,
.test2 {
  text-align: center;
  width: 250px;
  height: 250px;

}

<div class="test1">
<img src="https://wallpaperbrowse.com/media/images/_89716241_thinkstockphotos-523060154.jpg" />
</div>

<div class="test2">
<img src="http://images2.fanpop.com/image/photos/10200000/Some-Random-Stuff-wumbo-10274290-300-498.jpg" />
</div>

Answer 3

Georgy Malanichev指出，背景是一个不错的选择，如果您还需要索引图像以获得更好的SEO，您可以使用max-height和max-width CSS属性设置它：

div.imgContainer{
  float: left;
  width: 250px;
  height: 250px;
  border: 1px solid black;
}
div.imgContainer > img {
  max-width: 250px;
  max-height: 250px;
}

<div class="imgContainer">
  <img src="http://joelbonetr.com/images/fwhee.png">
</div>
<div class="imgContainer">
  <img src="http://joelbonetr.com/images/root.jpg">
</div>
<div class="imgContainer">
  <img src="https://lh3.googleusercontent.com/bx2KTx4kmESKvwL2Npc8tdLuhIWFj3_ewMkAHNI6_5vj1tOrAukZD794wJqWRb_H_8I=w250-h250">
</div>
<div class="imgContainer">
  <img src="https://www.venca.es/i/967184/l/top-sexy-de-muselina-elastica-flocada-en-terciopelo-con-tiras-elasticas-negro-burdeos.jpg">
</div>

正如您所看到的，如果您检查，所有div都是250x250像素，并且图像适合在需要时调整大小。

如何将图像调整为宽度或高度

3 个答案: