时间戳

首页 > 解决方案 > 如何相对于图像大小调整 div 的大小

html - 如何相对于图像大小调整 div 的大小

问题描述

我想要的是：

我有一个背景清晰的衬衫的 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）推断它的高度，它从另一个子级（图像）推断它的高度，但不能完全理解为什么它不起作用，也不知道该怎么做。

标签： htmlcss

解决方案

您需要使用伪，因此 div 成为 parent ，并从那里使用垂直填充或边距将 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>

推荐阅读