技術標籤：Front-Endhtmlcsscss3html5

搬運自stack overflow, 原答案連結 stackoverflow: Image height same as width

此方法適用於任何尺寸的圖片，以width寬度為準，但是如果原尺寸比例不是正方形，顯示出來的是按正方形比例擷取的一部分。

CSS程式碼

.container {
  position: relative;
  width: 37%; /* 固定寬度 */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /*padding取決於寬度，這裡設定padding-bottom: 100%就可以得到正方形*/
}

.container img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /*將圖片大小固定為父類div的大小*/
  width: 100%; 
  height: 100%;
  object-fit: cover; /* 相當於 background-size: cover; of a background-image */
  object-position: center;
}
 

HTML程式碼

<div class="container">
  <img src="https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"/>
</div>