Css: How To Make Image Not Exceed Its Parents Height In Flexbox?
I have a flex container, which for the sake of simplicity has a fixed height of 300px (in reality it has a flexible height). Within this container there are several other container
Solution 1:
The only way to disregard the image height is to use positioning on the image wrapper:
1.position the image absolutely with respect to its wrapper,
2.you can either give a width to the image wrapper or give flex: 1on item toget half of the available width horizontally.
Source: Image flex item does not shrink height in a flexbox
<html><body><divstyle="display: flex; flex-flow: column; height: 300px;"><divstyle="background: green;">HEADER</div><divstyle="background: red;">CAPTION</div><divstyle="background: blue;">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div><divstyle="position: relative;background: yellow; flex: 1"><imgstyle="display:block;width: 100%;height: 100%; object-fit:cover;position: absolute;top: 0;left: 0"src="https://via.placeholder.com/100x500" ></div><divstyle="background: orange;"><button>ACTION</button></div></div></body></html>
Post a Comment for "Css: How To Make Image Not Exceed Its Parents Height In Flexbox?"