如果我不使用 object-fit contains,图像会拉伸(stretch)。宽度拉伸(stretch),失去纵横比。
object-fit 包含修复该问题。
问题是,不包含元素本身,只包含可见图像。这意味着如果我将图像设置为可点击,则整个元素区域(甚至在图像之外)都是可点击的。
https://jsfiddle.net/nyysyngp/10/ (或查看下面的代码)
我只希望可见图像可以点击。这似乎适用于 Firefox,但不适用于 Chrome。
body, html
{
margin: 0;
padding: 0;
background-color: red;
display: flex;
height: 100%;
width: 100%;
}
#media
{
display: flex;
background-color: #262423;
justify-content: center;
align-items: center;
flex-direction: column;
flex-grow: 1;
}
#media_split
{
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
align-items: center;
}
#media_image_container
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: green;
}
#media_image
{
object-fit: contain;
max-height: calc(100% - 4em);
max-width: calc(100% - 4.7em);
min-height: 100px;
min-width: 100px;
cursor: pointer;
}
#media_tv
{
height: 50%;
width: 100%;
flex-grow: 1;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
background-color:blue;
}
<div id='media'>
<div id='media_split'>
<div id='media_image_container'>
<img id='media_image' src='https://i.imgur.com/F26h0tq.jpg'>
</div>
<div id='media_tv'></div>
</div>
</div>
最佳答案
嗯,几个月后我找到了解决方案。只需在 #media_image 中添加“position: absolute”,问题就消失了,在我的例子中,这并没有破坏任何其他东西。
关于html - 具有最大高度和最大宽度以及适合对象的 flex 父级图像包含,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49333728/