处理高度和宽度溢出

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>

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

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>

Answer 2

这似乎可以做到：

<style>
figure {
   border: medium solid red;
   height: 240px;
   max-width: 426px;
   overflow: hidden;
}
img {
   left: 50%;
   position: relative;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 426px;
}
</style>
<figure>
   <img src="https://i.ytimg.com/vi/xMzpFTcT4eg/sddefault.jpg">
</figure>

如果谁有更好的方法，请告诉我。

处理高度和宽度溢出

Dealing with height and width overflow

css

overflow

centering