如何将图像适合 div？ [复制]答案

【问题标题】：How do I fit an image to a div? [duplicate]如何将图像适合 div？ [复制]
【发布时间】：2019-07-05 13:52:48
【问题描述】：

我在尝试将图像放入我的 div 时遇到问题。我的图像比我的 div 大，所以当我做传统的时候

 style="width:100%;"

它将调整 div 的大小，占用比应有的更多空间。

我尝试过使用样式=“最大宽度：100%；”背景尺寸：包含；背景尺寸：封面；

以及调整图像大小以适应整个 div 的几乎所有方法。

我正在使用 CSS 网格，因此该区域的大小是我希望保持整个图像适合的方式，但是当使用诸如 max-width 之类的东西时，它只会改变区域的大小，使其比它应该的更大

我基本上想做类似的事情

This example

图片会占据整个 div 而不会溢出的地方

【问题讨论】：

根据一张图片和一行代码来解决这样的问题非常困难。您能否提供一些重现问题的代码或指向问题发生位置的链接？以下是提出问题时提供的一些指南：stackoverflow.com/help/mcve
将需要查看您的一些 css，但添加以下内容：溢出：隐藏；背景重复：不重复；背景尺寸：封面；另一件事，您是否将图像设置为 div 的背景图像？还是你只是在 div 中放一张图片？
@AonghasM 我会尝试添加一些重现问题的代码
@AdrianPop 我已经尝试了所有这些解决方案，它们都不起作用
@Spangle 我将添加一些代码来演示，我尝试将 div 设置为背景，将 img 设置为 div 以及其他所有内容

标签： javascript html css

【解决方案1】：

我想这可能是您需要的解决方案。

Sample

<div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
  <div class="outer">
    <img class="img_size" src="https://www.w3schools.com/html/pic_trulli.jpg" alt="not found">
  </div>
</div>

CSS：

.outer {
  width: 180px;
  height: 180px;
  margin: 10px;
  float: left;
}

.img_size {
  width: 100%;
  height: 100%
}

所有这些都取决于外部 div 的样式。最好将您的图像标签包含在 div 中，并为其提供适当的宽度和高度。

【讨论】：

【解决方案2】：

我快速创建了以下 CSS 网格，它看起来像您想要演示的结果。我还添加了一些你可以用 CSS 网格做的很酷的技巧。

body, html{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
*, *:before, *:after {
    box-sizing: inherit;
  }

.container{
  margin: 0 auto;
  width:100%;
  height: 100vh;
  display:grid;
  grid-template-columns: 5% repeat(3, 1fr) 5%;
  grid-template-rows: 5% repeat(2,1fr) 5%;
  grid-gap: 1%;
}
.imageOne{
  grid-row: 2/3;
  grid-column: 2 / -2;
  background-color:rgb(247,247,247);
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageTwo{
  grid-row: 3/4;
  grid-column:2 / 3;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageThree{
  grid-row: 3/4;
  grid-column:3 / 4;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}
.imageFour{
  grid-row: 3/4;
  grid-column:4 / 5;
  background-image:url('https://cdn.photographylife.com/wp-content/uploads/2016/06/Mass.jpg');
  background-repeat:no-repeat;
  background-size: 100% 100%; 
  background-position:center;
  color:rgb(255,255,255);
}

<div class="container">
  <div class="imageOne">
    image one
  </div>
  <div class="imageTwo">
    image two
  </div>
  <div class="imageThree">
    image three
  </div>
  <div class="imageFour">
    image four
  </div>
</div>

享受并希望它有所帮助。还有Codepen链接here

【讨论】：

这肯定会帮助我组织网格，但对我来说，问题是如果我在这些占位符（如 .imageOne）上放置一个大图像，它会切断，但是，会调整图片大小可以解决这个问题吗？
我刚刚更新了答案并添加了 background-position:center;这将使每个网格中的图像居中。您必须考虑图像的大小和尺寸，否则图像可能会失真以覆盖 div 的形状。最终使用的最好的东西是 .svg 文件，因为它们的扩展性最好。
我认为这是处理它的最佳方式，非常感谢，我一定会记住图像尺寸，因为这似乎是图像裁剪的原因
乐于助人。此外，要停止裁剪，请将 background-size:cover 替换为 background-size: 100% 100%;请记住，这可能会导致图像失真以覆盖 div 的形状。

【解决方案3】：

我了解您的情况，您可以简单地使用 object-fit css 属性来实现结果。

例子：

<html>
<head>
      <title>
           Image Example
      </title>
</head>
<style>
     .outer-div{
          height:300px;
          width:300px;
     .outer-div img{
          height:300px;
          width:100%;
          /* This will set the image size as cover */
          object-fit: cover;
         /* Give this a try too..use which ever fits your scenario.
          object-fit:contain;
           */
  </style>
  <body>

        <div class="outer-div">
              <img src="path/to/image">
        </div>
  <body> 
<html>

【讨论】：