Question

我想要什么：

我有一个具有清晰背景的衬衫的PNG图像，我想将其放置在彩色正方形的顶部，以使图像中的衬衫会“弹出”正方形的边缘，以用于装饰目的。图像的宽度设置为100％，高度自动设置为保持原始比例。如果调整了窗口的大小，则正方形的高度和宽度应相对于图像的高度和宽度，并应在图像旁边响应性地调整大小。

我尝试过的操作：

使用div作为装饰方块，使用img html元素作为图像，并将它们都放置在容器中是什么？

这是正方形的CSS：

.square {
    width: 80%;
    height: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10%;
    background-color: red;
    z-index: -1;
}

图片的CSS：

.shirtImage {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

容器只是一个div。

问题：

设置为正方形的高度的80％相对于整个页面，一直到底部，而不仅仅是将图片和正方形包裹起来的div。
我意识到这种方法注定是行不通的，因为我期望正方形从父对象（包装div）推断出它的高度，从而从另一个孩子（图像）推断出它的高度，但是我不能完全理解为什么它无法正常工作，无法解决该问题。

Answer 1

您需要使用伪值，以便div成为父级，然后从此处使用垂直填充或边距将div拉伸为正方形。可以将图片放置在绝对位置，以避免修改div的高度。

https://developer.mozilla.org/en-US/docs/Web/CSS/padding

<percentage>

相对于包含块的宽度，以百分比为单位的填充大小。

可能的例子

.square {
  width: 80%;
  height: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 10%;
  background-color: red;
  z-index: -1;
  position: relative;
  overflow: hidden;
}

.square:before {
  content: '';
  display: block;
  padding-top: 100%;/* equals width of parent */
}

.shirtImage {
  width: 95%;/* 95 instead 100 for the demo*/
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom:0;
  right:0;
}

<div class="square">
    <img class="shirtImage" src="http://dummyimage.com/100/fe0">
</div>

如何相对于图像尺寸调整div尺寸

我想要什么：

我尝试过的操作：

问题：

1 个答案: