我有一個(gè)容器內(nèi)部的圖像，我希望它是一個(gè)完美的正方形。我將我的寬度設(shè)置為容器的100%,目標(biāo)是讓圖像的高度與寬度相同，因?yàn)槲也恢理憫?yīng)設(shè)計(jì)的容器大小。

有什么想法嗎？如果有用的話，我用的是sass..

.container {
width: 50%;
}

.container img {
  width: 100%;
  height: 400px; //this should be the same as the width value..
}

<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>

CSS是一種不斷發(fā)展的語(yǔ)言，我們現(xiàn)在可以使用縱橫比。

這種解決方案需要的代碼更少，也更簡(jiǎn)單，這就是我今天要用的。

長(zhǎng)寬比: aspect-ratio CSS屬性設(shè)置框的首選縱橫比，該縱橫比將用于計(jì)算自動(dòng)大小和一些其他布局功能。

MDN上的縱橫比 CSS屬性:caniuse上的縱橫比

.container {
  width: 50%;
}

.container img {
  width: 100%;
  aspect-ratio: 1 / 1;  /* defining the aspect ratio of the imaage */
  object-fit: cover;    /* making sure the image isn't distorted */
}

<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>

如果你愿意使用背景圖像，那么這個(gè)解決方案將工作https://codepen.io/anon/pen/jpyrwB。

這將保持一個(gè)正方形的比例，使圖像覆蓋整個(gè)div。它還將保持圖像居中，如果圖像寬度大于高度，則裁剪圖像的兩側(cè)。

超文本標(biāo)記語(yǔ)言

<div class='square-box'>
    <div class='square-content'></div>
</div>

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

.square-box{
    position: relative;
    width: 50%;
    overflow: hidden;
}
.square-box:before{
    content: "";
    display: block;
    padding-top: 100%;
}
.square-content{
    position:  absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-image: url(https://images.pexels.com/photos/1249588/pexels-photo-1249588.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260);
    background-position: center;
    background-size: 100% 100%;
    background-size: cover;
}

將此添加到樣式文件的頂部:

:root{
  --size: 100px;
}

然后將定義的變量賦予寬度和高度:

width: var(--size);
height: var(--size);

另一個(gè)技巧是使用圖像本身作為背景，然后應(yīng)用高度為0的垂直填充方法。

下面的演示(有一個(gè)dummyimage，你的沒(méi)有顯示給我)

.container {
  width: 50%;
}

.container img {
  width: 100%;
  height: 0px;/* padding will mage sizing here */
  padding: 50% 0;/* make it a square = 100% vertical padding , none horizontal*/
  background-image: url(http://dummyimage.com/750x1260/951&text=My_BG_Image);/* used a different color from the one in the tag */
  background-size: 100% 100%;
  /* reset just in case */
  background-clip: border-box;
  box-sizing:border-box;
}

<div class="container"><img src="http://dummyimage.com/750x1260/159&text=My_Image" /></div>

也許這對(duì)你有用？

.container img {
 width: 100%;
 padding-bottom: 100%;
}