How can I resize the image to fit in the size of the div piecemaker-container
?
<div id="piecemaker-container">
<div id="piecemaker">
<img src="splash.jpg" alt="some_text"/>
</div>
</div>
#piecemaker-container {
display:block;
height:460px;
overflow:hidden;
margin: -10px auto 40px;
width: 960px;
max-width:100%;
max-height:100%;
}
Something like - ?
#piecemaker {
display:block;
height:460px;
overflow:hidden;
margin: -10px auto 40px;
width: 960px;
}
The max-height property sets the maximum height of an element, and the max-width property sets the maximum width of an element. To resize an image proportionally, set either the height or width to "100%", but not both. If you set both to "100%", the image will be stretched.
Another way is to simply use background-image on the container instead, but resizing it (if you want to stretch smaller images) will be difficult unless you use background-size which isn't fully supported. Otherwise, it's a great easy solution.
Using inline-block property: Use display: inline-block property to set a div size according to its content.
#piecemaker-container div, #piecemaker-container img {
width: 100%;
height: 100%;
}
This should do it.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With