处理高度和宽度溢出

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>

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