Question

我在另一个div元素中包含了image元素：

<p align="right" class="bottom_right icon_image">
    <img src="img/icon_image.png" alt="myartwork" class="child_image">
</p>

现在，当我将子元素设置为最大宽度时，我得到父亲的一面，但是当我将宽度设置为100％时，我得到了屏幕的宽度。为什么会这样？

.icon_image{
    height: 25vh;
    width: auto;                
}
.child_image{
    max-height: 100%; //When set tp height: 100%, behaves crazy.
}

编辑：.bottom_right已附加：

    .bottom_right{
            position: fixed;
        }
        .bottom_right{
            right: 5%;
            bottom: 5%; 
        }
        .bottom_right:hover{
            right: 9%;
            bottom: 9%;
        }

Answer 1

此信息不足以调试此问题。我鼓励您首先将此代码放入Codepen。您提供的代码直接粘贴到Codepen中不会重新产生问题。

Answer 2

您的<p>标记表示class="bottom_right icon_image"。您的CSS文档中是否还有另一个名为'bottom_right'的类元素？或者，这是指其他吗？

感谢您添加的代码片段。这是我的建议：

.icon_image或.child_image应该被编辑为仅包含“最大宽度：100％；高度：自动；”。这将允许图像的宽度和高度根据查看者的屏幕尺寸自动调整。本质上，它模仿矢量图形图像。如果将其设置为.img（如我的示例），则所有图像都将具有此效果。这消除了对.icon_image和.child_image类的需要。将宽度/高度数据添加到HTML图像标签中，但是您不再需要指示样式类（它将自动获得.img样式，对吗？）注意：.bottom_right类无需更改。
< br /> 生成的代码应如下所示：

<p align="right" class="bottom_right">
    <img src="img/icon_image.png" width="" height="" alt="myartwork">
</p>

.img { max-width: 100%; height: auto; }

.bottom_right{
        position: fixed;
    }
    .bottom_right{
        right: 5%;
        bottom: 5%; 
    }
    .bottom_right:hover{
        right: 9%;
        bottom: 9%;
    }

在具有指定尺寸的div内时，图像宽度和最大宽度之间有什么区别？

2 个答案: