调整浏览器高度时图像缩小，但调整宽度时图像不缩小

Question

我正在尝试使其高度限制为查看图像的设备的高度，以便无需向下滚动即可查看整个图像。

为此，我使用了：

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 1240px;
}

因此，如果图片为500x1000像素，则高度为92vh，如果图片为1000x500，则宽度为1240px，高度（最有可能）小于92vh。

问题在于，如果我调整浏览器的高度，则图像会缩小，但是，如果缩放宽度，我的浏览器将裁切一部分图像，并且必须水平滚动才能看到整个图像。图片。

不确定如何兼顾两者。

https://codepen.io/BozhidarSK/pen/NBKyyW

.specific-image-flex-container {
  display: flex;
}

.specific-image-column {
  flex: 4;
}

.specific-image-container-element {
  text-align: center;
  position: relative;
  display: inline-block;
  width: 100%;
}

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 1240px;
}

.stickySpecificContainer {
  position: relative;
  z-index: 2;
  display: inline-block;
}

<div class="specific-image-flex-container">

  <div class="specific-image-column">
    <div class='specific-image-container-element'>
      <div class="stickySpecificContainer">
        <img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
      </div>
    </div>
  </div>

</div>

Answer 1

您希望图像默认最大宽度为100％，如果屏幕大于1240px，则最大宽度为1240px。您可以使用媒体查询来获得所需的结果：

body {
  margin: 0;
}
.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 100%;
}
@media screen and (min-width: 1240px) {
  .specific-image {
    max-width: 1240px;
  }
}

<img class="specific-image" src="https://dummyimage.com/1600x600/000/fff">

具有正方形图像的相同演示：

body {
  margin: 0;
}
.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 100%;
}
@media screen and (min-width: 1240px) {
  .specific-image {
    max-width: 1240px;
  }
}

<img class="specific-image" src="https://dummyimage.com/600x600/000/fff">

Answer 2

为图像提供最大宽度：100％而不是像素值，百分比值将确保图像的最大宽度为文档的100％。

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 100%
  }

.specific-image-flex-container {
  display: flex;
}

.specific-image-column {
  flex: 4;
}

.specific-image-container-element {
  text-align: center;
  position: relative;
  display: inline-block;
  width: 100%;
}

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 100%;
}

.stickySpecificContainer {
  position: relative;
  z-index: 2;
  display: inline-block;
}

<div class="specific-image-flex-container">

  <div class="specific-image-column">
    <div class='specific-image-container-element'>
      <div class="stickySpecificContainer">
        <img class='specific-image' src='https://i.redd.it/1v3x2pxkjy611.png' alt='Random image' />
      </div>
    </div>
  </div>

</div>

Answer 3

92vh是视图高度的92％。 vw用于视图宽度。

.specific-image {
  display: block;
  max-height: 92vh;
  max-width: 92vw;
}