Html CSS：图像要有“；固定的；高度、最大宽度和保持纵横比？

我有一组图片，每个图片都有不同的高度和宽度，我想把它们放在

div

标签中。我希望图片尝试有一个固定的高度，除非宽度超过一个固定的量，我希望高度收缩以保持纵横比。我试过：

.ArtistPic
{
    height: 660px;
    max-width: 720px;
}

这会固定高度，但如果图像宽度超过720px，则会水平挤压图片，并且不会保持纵横比。建议

---

编辑：也许更好的方式是，我希望图片扩展到这些尺寸之一，并保持纵横比。

如果高度固定，它将不会保持纵横比，将它们都设置为您想要的最大值，它将保持纵横比

.ArtistPic {
  max-width: 720px;
  max-height:660px;
}

编辑：

看看你的图像标签，它们可能已经设置了宽度和高度，如果是这种情况，你将需要删除它们

<img src="image/path" width="250px" height="3005px" alt="valid image"/>

如果它的宽度和高度都是这样，你就不能用css来修复它

使用

背景尺寸：封面
小提琴：
这将为您提供您想要的：

CSS
基本上，只要给自己买一份
就行了。这能满足你的需要吗

.ArtistPic {
    max-width: 720px;
    max-height: 660px;
}

看

编辑：使答案更简单。
我希望图片扩展到这两个值中的一个，并保持比例。如果图片比其中任何一个都小，则不会这样做。请检查编辑，确保图像标记没有高度和宽度属性。我确保没有。但是，假设图片是100px x 200px，我希望图像拉伸到最大宽度或最大高度。但两者都不能超过。这样，图像就不会展开，而是保持100px乘以200px。您不希望拉伸的图像比实际图像大。应该是这样的。将图像放大，这样它们就可以按照您的意愿重新调整大小。这对于视网膜设备或更高分辨率的屏幕也会更好。在保持纵横比的同时，选择有趣的图像。
img {
    width: auto;  /* set to anything and aspect ratio is maintained - also corrects glitch in Internet Explorer */
    height: auto;  /* set to anything and aspect ratio is maintained */
    max-width: 100%;
    border: 0;  /* for older IE browsers that draw borders around images */
}

.ArtistPic {
    max-width: 720px;
    max-height: 660px;
}