要保持图片高度变化后仍居中,可以使用CSS的Flexbox布局来实现。以下是一个示例代码:
HTML代码:
CSS代码:
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* 设置容器的固定高度 */
}
.image-wrapper {
display: flex;
justify-content: center;
align-items: center;
max-height: 100%; /* 图片的最大高度为容器的高度 */
}
img {
max-height: 100%; /* 图片的最大高度为包裹元素的高度 */
max-width: 100%; /* 图片的最大宽度为包裹元素的宽度 */
height: auto; /* 保持图片的宽高比 */
}
在上面的代码中,我们首先创建一个容器元素 .container
,通过设置其父元素的高度来确定容器的高度。然后,在容器内部创建一个包裹元素 .image-wrapper
,使用Flexbox布局来实现垂直和水平居中。最后,将图片放置在包裹元素内,并设置其最大高度和最大宽度为100%,以及自动调整高度的属性。
这样,当图片的高度发生变化时,它仍然会居中显示,并保持原始的宽高比。