調整瀏覽器高度時圖像縮小，但調整寬度時圖像不縮小

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

如果將max-width：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;
}