Question

我目前正在处理一些父/子CSS代码，并且正在努力缩小图像。

我尝试用[最大宽度]更改百分比和像素的大小，但是没有用。尝试更改父元素[.entireWoman]和4个子元素的大小也没有任何区别。

<div class="entireWoman">

    <div id="Woman">
        <img src="../Portfolio/images/Woman.png" alt="Woman">
    </div>

    <div id="upperRotate">
        <img src="../Portfolio/images/Upper_arm.png" alt="Upper arm">
    </div>

    <div id="downRotate">
        <img src="../Portfolio/images/Down_arm.png" alt="Down arm">
    </div>

    <div id="handRotate">
        <img src="../Portfolio/images/Hand.png" alt="Hand">
    </div>

</div>

.entireWoman{
    animation: enter 5s;
    position:relative;
    top:0;
    left:0;
    margin-top:400px;
    margin-left:400px;
}

.entireWoman > #Woman {
    position: absolute;
    max-width:20%;
    height:auto;
    z-index: 2;
}

.entireWoman > #upperRotate{
    max-width:10%;
    height:auto;
    position: absolute;
    z-index: 1;
    transform-origin: 90% 90%;
    top:0;
    left:0;
    margin-top:10px;
    margin-left:10px;
}

.entireWoman > #downRotate {
    max-width:10%;
    height:auto;
    position: absolute;
    z-index: 1;
    transform-origin:99% 50%;
    top:0;
    left:0;
    margin-top:5px;
    margin-left:-150px;
}

.entireWoman > #handRotate {
    max-width:10%;
    height:auto;
    position: absolute;
    z-index: 1;
    transform-origin: 99% 50%;
    top:0;
    left:0;
    margin-top:20px;
    margin-left:-220px;
}

总的来说，我只是想缩小图像，但没有一种尝试的方法。

Answer 1

我怀疑您遇到的问题是容器div遵守您的尺寸规则，但图像本身却没有，并且div溢出。尝试添加规则以将图片限制为100％：

img { max-width: 100%; }

在下面的代码段中，请注意 div 是正确的尺寸，但是图像超出了其边界。如果将图片的最大宽度设置为100％，则表示符合标准。

#container {
  position: relative;
  width: 400px;
  height: 200px;
}

.item1 {
  position: absolute;
  max-width: 50%;
  border: 2px solid red;
}

img {
  display: block;
  opacity: 0.5;
}

input:checked + #container img {
  max-width: 100%;
}

<div>
<p>The red box is the div containing the image.</p>
<p>Check the box to set max image width to 100%.</p>
</div>
<input type="checkbox"/>
<div id="container">
  <div class="item1">
    <img src="https://placekitten.com/600/300" />
  </div>
</div>

如何在带有[position：relative]的父元素内更改带有[position：absolute]的子元素的大小？

1 个答案: