Question

我有三张图像，一个又一个，创建了一个三列的图像布局。我需要使这些图像具有特定的高度，以便无论图像如何，都将其裁剪到该高度。

关键是我需要这些图像来保持长宽比，具体取决于您调整窗口大小的方式。

如果我声明一个特定的高度（即700px或70vh），则假设窗口宽度为1900px或700px，则外观会有很大不同。

有没有一种方法可以“锁定”图像的高度尺寸，以便无论您的屏幕如何，并考虑到每个图像的高度都不相同，它们可以保持其纵横比？

预先感谢

Answer 1

有几种方法可以做到这一点，

使用背景图片，而不是将图片放入div-这非常灵活。
object-fit 适用于图像本身，但您必须在图像上设置尺寸，而不仅仅是容器。与以前相比，现在对此的支持更多，但是像往常一样，IE是个问题。

对于这两种方法，您都希望使用cover，以便使图像足够大以填充容器，但会裁剪掉不合适的部分。

接下来是完成这两种方式的代码。查看其工作原理的评论：

背景图片

.column {
  /* this is the important bit */
  background-size: cover;
  /* this is where the image is positioned. 
  This puts it horizontally centered and vertically at the top 
  You can use left, right, bottom or values in px or %  */
  background-position: center top;
  
  /* this is not important. It is to make columns so you can see it work*/
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;

}

/* put the images as background images.*/
.pic1 { background-image: url("https://via.placeholder.com/300x700"); }
.pic2 { background-image: url("https://via.placeholder.com/250x400"); }
.pic3 { background-image: url("https://via.placeholder.com/300x300"); }

<div class="column pic1"></div>
<div class="column pic2"></div>
<div class="column pic3"></div>

对象拟合

/* this is the important bit */
img {
  object-fit: cover;
  /* you must set the sizes here or it won't work. e.g. */
  width: 100%;
  height: 100%;
}

/* this is not important. It is to make columns so you can see it work */
.column {
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;
}

<div class="column"><img src="https://via.placeholder.com/300x700"></div>
<div class="column"><img src="https://via.placeholder.com/250x400"></div>
<div class="column"><img src="https://via.placeholder.com/300x300"></div>

另一个带有真实照片的示例，因此您可以在调整窗口大小时看到它们保持宽高比并且不会拉伸。实际图像大小是网址中的尺寸：

图片1为300px * 700px
图片2为250px * 400px
图片3为300px * 300px

/* this is the important bit */
img {
  object-fit: cover;
  /* you must set the sizes here or it won't work. e.g. */
  width: 100%;
  height: 100%;
}


/* this is not important. It is to make columns so you can see it work */
.column {
  width: 30%;
  height: 400px;
  display: inline-block;
  border: 1px solid red;
}

<div class="column"><img src="https://source.unsplash.com/MJBh9NBoD20/300x700"></div>
<div class="column"><img src="https://source.unsplash.com/afuOsuzyx24/250x400"></div>
<div class="column"><img src="h
ttps://source.unsplash.com/dOmKEVCg94s/300x300"></div>

Answer 2

您可以设置最小/最大宽度和高度属性：

img {
  display: block;
  max-width:230px;
  max-height:95px;
  width: auto;
  height: auto;
}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>
<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

或者您可以使用object-fit: cover; CSS属性。请注意，这将保留比率，但可能会“裁剪”图像。有关更多信息，请参见this question。会更具体。

Answer 3

将图像的宽度设置为其父容器的百分比。例如：

body {
   height: 100vh;
   display: flex;
   justify-content: space-evenly;
}

img {
   width: 50%;
}

这将确保图像始终占据其所在容器的50％，在本例中为容器。

Answer 4

您可以使用object-fit。

.container{
  width: 300px; /* arbitrary width, use yours */
}

.container > div{
  width: 33.3%; /* 1/3 = 33.3 For 3 elements for each row */
  height: 100px; /* arbitrary height, use yours */
  box-sizing: border-box;
  padding: 10px; /* space between images */
  float: left;
  overflow: hidden; /* crop image if they are not an exact square */
}
.container > div > img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}

<div class='container'>
  <div><img src='https://picsum.photos/200/300' alt='first sample image'/></div>
  <div><img src='https://picsum.photos/300/400' alt='second sample image'/></div>
  <div><img src='https://picsum.photos/400/400' alt='third sample image'/></div>
</div>

您也可以使用background-image，但是应该在CSS中声明图像的来源。当您有多张图片时（例如在图库中），请优先使用object-fit。

相等列的图像高度和纵横比

4 个答案: