如何在不扭曲图像的情况下将图像放入固定大小的 div 中？答案

【问题标题】：How to fit an image inside a fix sized div without distorting the image?如何在不扭曲图像的情况下将图像放入固定大小的 div 中？
【发布时间】：2020-07-11 07:16:54
【问题描述】：

有没有办法在不拉伸的情况下将图像放入固定大小的 div 中？

我的图像不能是横向或纵向的，无法容纳在 250 像素的 div 中，问题是 ut 真的被拉伸了。

实际图片尺寸：

当前结果：

CSS 代码：

.container {
    position: relative;
    width: 250px;
    height: 250px;
    margin-bottom: 30px;
}

.container img {
    width: 100%;
    height: auto;
}

HTML 代码：

<div class="row text-center text-lg-left">
    <div th:each="inst, iStat : ${instances}" class="container"
     th:if="${inst.fileStatus} eq ${T(br.com.macrosul.stetho.entity.FileStatus).UPLOADED}">
    <a href="#" class="d-block mb-4 h-100"> <img class="img"
    data-target="#showMedia" data-toggle="modal"
        th:data-slide-to="${iStat.index}"
        style="width: 100%; height: 100%"
        th:src="@{'/instances/' + ${inst.id} + '/thumbnail' + ${folder != null ? '?folder=' + folder.id : ''}}"
         alt="">
      </a>
   </div>
</div>

【问题讨论】：

标签： html css image image-size

【解决方案1】：

首先“你的错误” - 你将 300px 的图片放入 250px 高度的容器中（溢出 50px）。将.container 溢出设置为scroll 即可看到：

.container {
  position: relative;
  width: 250px;
  height: 250px;
  margin-bottom: 30px;
  overflow: scroll;
}

.container img {
  width: 100%;
  height: auto;
}

<div class="container">
<img class="img" src="https://i.picsum.photos/id/12/200/300.jpg">
</div>

对象拟合

Object-fit 仅适用于 if 您调整图像大小 - 或 - 包装器（并设置与此包装器相关的图像大小）。

https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit

基本示例“图像调整大小”（无用）：

调整图像大小object-fit cover - 400h X 800W 图像 - 将高度设置为 150hX150w - 零失真（“裁剪效果”）：

&lt;img style="width: 150px; height: 150px; object-fit: cover;" src="https://i.picsum.photos/id/10/400/800.jpg"&gt;

基本示例 2（也不是很有用）

将图像高度/宽度设置为100% 并设置包装高度（如“窗口”）。

<div class="container" style="height: 200px;">
  <img style="width: 100%; height: 100%; object-fit:cover;" class="img" src="https://i.picsum.photos/id/12/500/600.jpg">
</div>

更动态的例子：

解决此问题的“著名” CSS 技巧：

relative 包装器（您想要的任何尺寸）和absolute 100% w/h 内部图像和object-fit:cover。

使用固定大小的包装器

<div style="position: relative; height: 200px; width: 200px">
  <img style="position: absolute; top:0; right: 0; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: cover;" src="https://i.picsum.photos/id/10/400/800.jpg">
</div>

使用aspect-ratio 16:9 框 非常非常yyyyyyyy - 很有用（例如，像 instagram 网格 - 强制所有图像具有相同的纵横比）。

完整教程在这里： https://css-tricks.com/aspect-ratio-boxes/ https://css-tricks.com/aspect-ratio-boxes/

https://www.w3schools.com/howto/howto_css_aspect_ratio.asp

<h5>16:9 box</h5>
<div style="position: relative; padding-top: 56.25%;">
  <img style="position: absolute; width: 100%; height: 100%; top:0; right:0; left:0; right: 0;object-fit: cover;" src="https://i.picsum.photos/id/10/700/1100.jpg">
</div>

【讨论】：

【解决方案2】：

试试“object-fit:cover;”在.Container img上

【讨论】：

想想这个。图片的尺寸是多少，包含的 div 的尺寸是多少？
"对象适配：封面；"没有改变任何东西
div 是 250x250px，图像更大，但我不明白你的意思。不拉伸就不能合身吗？

【解决方案3】：

不要在图像标签上明确指定宽度或高度。给它吧

max-width:100%;
max-height:100%;

如果你只想指定宽度也可以选择height: auto; apply

所以我这里有两张图片的例子

img {
    max-width: 100%;
    max-height: 100%;
}


.square_little {
    height: 40px;
    width: 40px;
}

.square_big {
    height: 200px;
    width: 200px;
}

Square Div 40px x 40px
<div class="square_little">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

Square Div 200px x 200px
<div class="square_big">
    <img src="https://recruiterflow.com/blog/wp-content/uploads/2017/10/stackoverflow.png">
</div>

我希望这对你也有用......

【讨论】：