Question

我在容器内有一个图像，我希望它是一个完美的正方形。我将宽度设置为容器的100％，目标是使图像的height与宽度相同，因为我不知道容器的大小响应式设计。

有什么想法吗？如果有帮助，我正在使用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>

最好没有javascript解决方案，但是也许不可能吗？

Answer 1

我们中的许多人在注释中为您提供了一些提示，因此，现在您应该可以创建一个响应方块。

如果没有，请看一下这篇文章：https://stackoverflow.com/a/21538018/7100628

使图像适合正方形

以防万一您遗漏了最后一部分，您可以按照以下方法将图像（具有任何长宽比）适合该正方形 >。这也意味着，如果图像未平方，则会被裁剪。

摘要：

.container {
  position: relative;
  width: 37%; /* The size you want */
}
.container:after {
  content: "";
  display: block;
  padding-bottom: 100%; /* The padding depends on the width, not on the height, so with a padding-bottom of 100% you will get a square */
}

.container img {
  position: absolute; /* Take your picture out of the flow */
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; /* Make the picture taking the size of it's parent */
  width: 100%; /* This if for the object-fit */
  height: 100%; /* This if for the object-fit */
  object-fit: cover; /* Equivalent of the background-size: cover; of a background-image */
  object-position: center;
}

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

Answer 2

将此添加到样式文件的顶部：

    :root{
  --size: 100px;
}

然后将定义的变量同时指定为宽度和高度：

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

Answer 3

如果您愿意使用背景图片，那么此解决方案将适用于https://codepen.io/anon/pen/jpyrwB。

这将保持平方比，并使图像覆盖整个div。如果图像比高度宽，它还将使图像居中并裁切侧面。

HTML

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

CSS

.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;
}

Answer 4

也许这对您有用吗？

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

Answer 5

另一种技巧是将图像本身用作背景，然后应用高度为0的垂直填充方法。

下面的演示（带有虚拟图像，您的不显示给我）

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

请注意，我还使用了您的图像尺寸，它也不是正方形。您还介意拉伸吗？

图像高度与宽度相同

5 个答案:

使图像适合正方形

摘要：