图像高度与宽度相同

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

我们中的许多人在 cmets 中给了你一些提示，所以现在你应该能够创建一个响应式正方形。

---

使图片适合正方形

以防万一您遗漏了最后一部分，以下是您如何将图像（具有任何宽高比）放入该正方形中。这也意味着如果您的图像不是方形的，它将被裁剪。

片段：

.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

如果您愿意使用背景图片，那么此解决方案将有效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 3

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

    :root{
  --size: 100px;
}

然后将定义的变量同时赋予宽度和高度：

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

Answer 4

另一个技巧是使用图像本身作为自己的背景，然后应用高度为 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>

注意，我还使用了您的图片大小，它也不是正方形。你也介意拉伸吗？

Answer 5

也许这对你有用？

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