[英]Image doesn't change size with div container / window
So I'm trying to get some images in my sidebar but they don't want to change size with container / window. 所以我试图在侧边栏中获取一些图像,但他们不想用容器/窗口改变大小。
If i resize my window, the image gets under the middle area. 如果我调整窗口大小,图像会位于中间区域。
Link to preview my website 链接预览我的网站
body{ background: grey }
#container{ width: 100%; height: 100%; text-align: center }
#sidebar{ margin: 0; padding: 0; float: left; width: 5%; height: 100%; background: rgba( 255, 255, 255, 0.8 ); border-radius: 3px; box-shadow: 3px 3px 3px 3px #333 }
#interface{ display: inline-block; margin: 0 auto; width: 94%; height: 100%; background: rgba( 255, 255, 255, 0.8 ); border-radius: 3px; box-shadow: 3px 3px 3px 3px #333 }
#icon_1{ max-width: 100%; max-height: 100% }
Add this on your CSS: 在CSS上添加:
#icon_1 img {
width:100%;
}
You are setting width
values for containers but not for the img
so it displays in full size. 您正在为容器设置
width
值,但不为img
设置width
值,因此它以完整大小显示。
Or better to get all Icon img at one selector: 或者更好地将所有Icon img放在一个选择器上:
#sidebar img {
width:100%;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.