Изображение растягивается, если я не использую объектную подгонку. Растягивается по ширине, теряя соотношение сторон.
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>