首页 文章

CSS：图像具有“固定”高度，最大宽度和保持纵横比？

提问于
浏览 次
6

我有一组图片，每个图片都有不同的高度和宽度，我想放入 div 标签 . 我希望图片尝试具有固定的高度，除非宽度超过固定量，因此我希望高度缩小以保持纵横比 . 我试过了：

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

这会修复高度，但如果图像超出720px宽度，则会水平扫描图片并且不保持纵横比 . 建议？

编辑：也许更好的方法是将图片扩展为其中一种尺寸并保持宽高比 .

html css

4 回答

  • 28

    这符合您的需求吗？

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

    见http://jsfiddle.net/7s9wnjse/1/ .

    编辑：让答案更简单 .

    回复于
  • 2

    使用背景尺寸：封面;

    小提琴：http：//jsfiddle.net/SinisterSystems/cukgh/3/

    .box {
    float:left;
    margin:15px;
    width:100px;
    height:100px;
    background:url("http://www.hdwallpapers3g.com/wp-content/uploads/2014/01/Images-6.jpg");
    background-size:cover;
}
    回复于
  • 2

    这会给你你想要的东西：

    CSS

    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 */
}

    在此处查看并重新调整窗口大小以查看 .

    基本上，只需给自己一份 Normalize.css .

    回复于
  • 0

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

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

    编辑：

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

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

    如果它上面有宽度和高度，你将无法用css修复 .

    回复于

相关问题