如何设置与宽度相同的最大高度

Question

我目前正在写我的博客，我试图将所有图像调整为 1:1 的比例，这对于高度大于宽度的图像非常有用。另一方面，它也可以“很好地”处理宽度较大的图像。但我遇到的主要问题是宽度较大的图像不需要符合 1:1 的比例，因为这样可以更好地对齐下面的描述。

我该如何解决这个问题？ （请在下面找到我的代码）：

CSS：

.img-container {
    background: transparent;
    position: relative;
    width: 100%;
}

.img-container:after {
    content: "";
    display: block;
    padding-bottom: 100%;
}

.img-container img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    cursor: pointer;
}

HTML：

<div class="img-container">
<img src="xxx"/>
</div>

提前谢谢你！

Answer 1

我不确定你在问什么。此外，这些图片都没有 1:1 的纵横比，这意味着它们是完美的正方形。

如果你想根据图像是横向还是纵向应用不同的 css，那么我认为你需要实现一些 javascript 来检测测量值，然后应用你希望应用的 css 类。

否则，我最初的想法是，你为什么不直接应用最大宽度？纵向图像将占用尽可能多的水平空间，因为它们需要达到最大，而横向图像将占用最大而不扭曲当前的纵横比。

Answer 2

object-fit: cover;

将调整图像的大小。

Answer 3

我正在解决同样的问题。

到目前为止，我唯一使用的非 js 解决方案是对

vw

使用

max-height

单位。但是为了让它始终如一地工作，您可能需要父元素也具有基于视口宽度的宽度，因此您需要一个值。在我的例子中是

55

.

.img-container img {
    width: 55vw;
    height: auto;
    max-height: 55vw;
    object-fit: contain;
    object-position: center center;
}

Answer 4

您可以通过根据图片的宽度指定容器的最大高度来修改您的 CSS，以获得您想要的布局，其中宽度较宽的照片不需要被压缩成 1:1 的比例。

.img-container {
  background: transparent;
  position: relative;
  width: 100%;
}

.img-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.img-container img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  cursor: pointer;
  max-height: calc(100vw - 40px); /* set max-height based on the width of the image */
}

/* additional stuff */    
@media only screen and (min-width: 768px) {
  .img-container img {
    max-height: calc((100vw - 80px) / 2); /* set a smaller max-height for larger screens */
  }
}

此代码中的 img 元素具有设置为 calc (100vw - 40px) 的 max-height 属性。这决定了图像的最大高度取决于视口的宽度减去 40 像素的小边距。在保留原始宽高比的情况下，这可以防止宽度较宽的照片被裁剪以匹配 1:1 的宽高比。

响应式网站：

为了使 max-height 属性适应更宽的屏幕，我还包含了一个媒体查询。此查询通过将最大高度设置为 calc((100vw - 80px) / 2) 来降低较大屏幕的最大高度，以更好地匹配图像及其下方的信息。

要创建您想要的布局，您可以根据需要更改媒体查询和最大高度属性的值。

Answer 5

你可以做类似的事情（你需要有一个额外的容器）

.demo-wrapper {
  width: 660px;
  margin: 0 auto;
}

.img-container {
  width: 100%;
  padding-bottom: 100%;
  position: relative;
  overflow: hidden;
}

.inner {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
  
img {
    object-fit: cover;
    width: 100%;
    min-height: 100%;
}

<div class="demo-wrapper">
  <div class="img-container">
    <div class='inner'>
      <img src="https://thumbs.dreamstime.com/b/beautiful-rain-forest-ang-ka-nature-trail-doi-inthanon-national-park-thailand-36703721.jpg"/>
    </div>
  </div>
  <div>Title 1</div>


  <div class="img-container">
    <div class='inner'>
      <img src="https://thumbs.dreamstime.com/b/walking-path-rain-forest-doi-intanon-nationalpark-chiang-mai-thailand-daylight-mountain-walking-path-rain-forest-doi-148937950.jpg"/>
    </div>
  </div>
  <div>Title 2</div>
</div>

Answer 6

这是我的解决方案，使用与您拥有的完全相同的 HTML。容器将根据其子图像高度调整其高度和宽度。无论是纵向还是横向，容器都会跟随图片的高度。如果是肖像，它不会裁剪任何东西（就像

object-fit: contain

的行为），如果是风景，它将采用图像的中间 1:1（就像

object-fit: cover

的行为）。

所以在某种程度上，这就像

object-fit: contain

对于肖像图像，但是

object-fit: cover

对于风景图像：

.img-container {
  background: transparent;
  position: relative;
  width: 100%;
  overflow: hidden;
}

.img-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.img-container img {
  position: absolute;
  height: 100%;
  left: 50%;
  transform: translate(-50%, 0);
}

<h1>portrait</h1>
<div class="img-container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg/640px-Tour_Eiffel_Wikimedia_Commons_%28cropped%29.jpg">
</div>
<h1>landscape</h1>
<div class="img-container">
  <img src="https://upload.wikimedia.org/wikipedia/commons/5/57/Cumulus_Clouds_over_Yellow_Prairie2.jpg">
</div>