CSS下图片只显示一半,通常是因为图片的宽度大于其容器的宽度,所以需要通过CSS来控制图片的大小。.container { width: 500px; height: 500px; overflow:
CSS下图片只显示一半,通常是因为图片的宽度大于其容器的宽度,所以需要通过CSS来控制图片的大小。
.container { width: 500px; height: 500px; overflow: hidden; } img { width: 100%; height: auto; display: block; margin-left: -50%; }
上述代码中,我们将容器的宽度设为500px,高度也同理,overflow属性设为hidden,表示超出容器的部分将被隐藏。
图片的宽度设为100%,高度设为auto,这样可以保持图片的比例不变。display属性设为block,使图片以块级元素的形式呈现,方便后续的样式设置。margin-left属性设为-50%,表示图片的左边缘与容器的左边缘对齐,因为图片的宽度为100%,所以一半的图片将会被隐藏在容器外面。
通过以上CSS样式设置,图片便会显示为容器的一半大小,使整个页面看起来更加美观。
粉丝
0
关注
0
收藏
0