Изображението се разтяга, ако не използвам object-fit contains. Разтяга се на ширина, губейки пропорциите.
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>