Question

我在尝试将图片适合div时遇到问题。我的图片比div大，所以当我做传统的

 style="width:100%;"

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

我尝试使用 style =“ max-width：100％;”背景大小：包含；背景尺寸：封面；

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

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

我本质上想做类似的事情

This example

图像将占据整个div并且不会溢出

Answer 1

我迅速创建了以下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

Answer 2

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

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内，并为此提供适当的宽度和高度。

Answer 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>

如何将图片适合div？

3 个答案: