如果我不使用对象适合包含,则图像会拉伸。拉伸宽度,失去纵横比。
对象适合包含修复。
问题是,元素本身不包含,只包含可见图像。这意味着如果我使图像可以点击,整个元素区域(甚至图像外部)都是可点击的。
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>
&#13;
答案 0 :(得分:0)
在#media_image_container中删除display:flex;并添加text-align:center;
它将解决问题。
答案 1 :(得分:0)
好几个月后,我找到了解决方案。只需在#media_image中添加“ position:absolute”,问题就消失了,在我看来,这没有破坏其他任何东西。