在 DIV 容器内维护类中图像的比率答案

【问题标题】：Maintaining ratios of an image within a class, inside a DIV container在 DIV 容器内维护类中图像的比率
【发布时间】：2019-07-25 10:56:58
【问题描述】：

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

我的问题是我应该把尺寸属性放在哪里？在 div 容器类或图像类上？为了保持比率，我应该包含哪些尺寸属性。

例子：

我在班级中有一张图片：

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

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

<div class="img-container">

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

我尝试添加：

最大高度：100%；最大宽度：100%；

到图像类。

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

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

【问题讨论】：

标签： html css image class

【解决方案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% 的纵横比大约是 facebooks 的帖子封面图片纵横比。

【讨论】：

【解决方案2】：

您的代码中有错字，您在给出未正确关闭的 id 时错过了结束引号。所以游览#img1 没有得到应用。修复它应该工作或按照工作演示链接。

<div id="img1></div>

working demo

【讨论】：

【解决方案3】：

一个 img 标签会自然地保持它的比例，所以如果可能的话你最好使用它：

<img src="image1.jpg">

如果您想在设置了宽度或高度的容器内保持图像的正确比例，您可以尝试使用object-fit。

最后，如果你想使用背景图片，但又想保持图片的比例，你可以使用background-size。

试试：

#img1 {
  background-image: url('image1.jpg');
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
}

【讨论】：

请注意，<img> 标签不使用也不需要结束斜杠，并且在 HTML 中从来没有。
非常感谢！我一直认为样式应该远离html的css，但你是绝对正确的，将图像作为src添加到html中要容易得多