css - 处理高宽溢出

Question

给定一张图片，我想将宽度锁定在 426px，并根据需要调整高度。

关于高度，我只想看到图像最中心的 240px。关于宽度，我希望整个宽度可见，但如果屏幕太窄，则从中心尽可能多地查看宽度。我有这个作为开始：

<style>
figure {
   border: medium solid red;
   height: 240px;
   max-width: 426px;
}
img {
   width: 426px;
}
</style>
<figure>
   <img src="https://i.ytimg.com/vi/xMzpFTcT4eg/sddefault.jpg">
</figure>

但图像没有居中，它被锁定在顶部。是否可以将图像垂直居中，隐藏高度溢出，同时在需要时隐藏宽度溢出？

标签： cssoverflowcentering

Answer 1

Flexbox应该可以解决问题。

<style>
figure {
   border: medium solid red;
   height: 240px;
   max-width: 426px;
   
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}
img {
   width: 426px;
}
</style>
<figure>
   <img src="https://i.ytimg.com/vi/xMzpFTcT4eg/sddefault.jpg">
</figure>