处理高宽溢出答案

【问题标题】：Dealing with height and width overflow处理高宽溢出
【发布时间】：2020-06-26 02:54:04
【问题描述】：

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

关于高度，我只想看到图像最中心的 240 像素。关于宽度，我希望全宽可见，但如果屏幕是太窄，然后从中心尽可能多地查看宽度。我有这是一个开始：

<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>

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

【问题讨论】：

标签： css overflow centering

【解决方案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>

【讨论】：

很接近，但是当你把它放在窄屏幕上时，它只是缩小而不是隐藏宽度
那么 img {flex-shrink: 0;} 就可以了。
@VXp 是的，可以修复它！

【解决方案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>

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

【讨论】：