處理高寬溢出

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>

如果有人有更好的方法，請告訴我。