html - 在 DIV 容器内的类中维护图像的比率

Question

我遇到的一件事是保持图像比例。我最终使它工作，但我过去所做的并不一致，通常通过反复试验来解决。

我的问题是尺寸属性放在哪里？在 div 容器类或图像类？我应该包括哪些尺寸属性以保持比率。

例子:

我在一个类中有一个图像:

#img1 {
background-image: url('image1.jpg');
}

然后我有一个 DIV 容器，里面有另一个包含图像类的 div:

<div class="img-container">

        <div id="img1></div>
    </div>

我尝试添加:

最大高度:100%；最大宽度:100%;

到图像类。

以及容器的实际图像像素大小，但这不起作用。

任何人都可以提供的任何帮助和提示/技巧都会很棒!谢谢

Answer 1

如果你知道图像的高度和宽度，你可以这样，其中 52.42% 是纵横比。

//markup
<div class="img1" style="background-img:url('image1.jpg')"></div>

//css
.img1 {
   width: 100%;
   height: 0;
   display: block;
   padding: 52.42% 0 0 0;
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-repeat: no-repeat;
   background-position: center;
}

如果您不关心原始图像的纵横比，而宁愿强加自己的纵横比，上述方法也适用。上面的类将在视觉上裁剪图像以使其适合框。例如，52.42% 的纵横比大约是 facebook 的帖子封面图片纵横比。