Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Resize an image to fit in div

Tags:

html

css

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;
}
like image 379
blue-sky Avatar asked Dec 26 '11 14:12

blue-sky


People also ask

How do you autofit an image in HTML?

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.

How do I fill an image in a div without stretching it?

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.

How do I fit the content of a div?

Using inline-block property: Use display: inline-block property to set a div size according to its content.


1 Answers

#piecemaker-container div, #piecemaker-container img {
width: 100%;
height: 100%;
}

This should do it.

like image 151
anuj_io Avatar answered Sep 18 '22 16:09

anuj_io