Resize, image of any size in Div

Question

I am trying to make a image to fit in a div irrespective of image size but when a image of different size is uploaded the image is not fitting or matching with others on a bigger size.

JS JSFiddle DEMO

.

HTML:

<div class="wrapper">
<div id="one">
<a  href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img  class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3>
</a>
</div>
<div id="one">
<a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img  class="imagewidth" src="http://www.vinodpatel.com.fj/media/catalog/category/paint_swatches.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom </h3>
</a>
</div>
<div id="one">
<a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;"><img class="imagewidth" src="http://mangoesandmiles.com/wp-content/uploads/2015/07/grohe-bathroom-faucets-SGjy.jpg"/>
<br>
<h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;"> Facets</h3>
</a>
</div>
</div>

CSS:

.wrapper div {

            width: 100%;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding-bottom: 8%;
            }

            @media screen and (min-width: 600px) {
            .wrapper {
            height: auto;
            }
            #one {
            width: 33.3333%;
            float: left;

            }

            }



            #one:hover h3 {



            transition: border-color .5s ease-in-out;
            cursor: pointer;

            color:#ff0000; 
            border-bottom-color: #ff0000;

            }





            #one h3 {

            color:#000000; 
            border-bottom: 2px solid #e7e4da;
            }




            .imagewidth
            {
            width: 98.5%;
            max-width: 100%
            }

            .headding_line
            {
            width: 50px;
            margin-top: 0px;
            margin-bottom: 30px;
            border-top: 2px solid #e7e4da;
            }

are you want than images block will be in the same level in the bottom? — AleshaOleg, Aug 12 '15 at 12:30
@Pauli first of all you can't give same ID to the multiple elements and if you want to do so(reuse) then you must need to use with **class** that you have given here **id="one"** — Himesh Aadeshara, Aug 12 '15 at 12:41
@Pauli and after that you can apply the div with class specify width and height to the div which contains the image thus how i think you can achieve your goal — Himesh Aadeshara, Aug 12 '15 at 12:44
@Pauli you want all the images whether different sizes are uploaded must look same same height and width in a div right/.? — Himesh Aadeshara, Aug 12 '15 at 12:56
@HimeshAadeshara yes absolutely and if the media is 600 px the image s should come one below the other — , Aug 12 '15 at 13:01
possible duplicate of [Image auto resize to fit div container](http://stackoverflow.com/questions/3029422/image-auto-resize-to-fit-div-container) — Rob, Aug 12 '15 at 13:34

score 0 · Answer 1 · answered Aug 12 '15 at 13:29

Hi @Pauli first of all it's my try to achieve what you want

one thing for the images's height will adjust by getting the as per width it self.

if you want particular height then you need to specify apply.

please look if it is work for you or not

.wrapperdiv{
 width: 100%;
 -webkit-box-sizing: border-box;
 -moz-box-sizing: border-box;
 box-sizing: border-box;
 padding-bottom: 8%;
}
.one{
    max-width:40%;    
}
.one img{
    max-width:40%;
    max-height:auto;
    display:block;
}
.one h3{
    max-width : 40%;
}
@mediascreenand (min-width: 600px){
 .wrapper{
  height: auto;
 }.one{
  width: 33.3333%;
  float: left;
 }
}
.one:hover h3{
 transition: border-color .5s ease-in-out;
 cursor: pointer;
 color: #ff0000;
 border-bottom-color: #ff0000;
}
.one{
    max-width:70%;    
}
.one img{
    max-width:70%;
    max-height:auto;
    display:block;
}
.one h3{
    max-width:70%;
 color: #000000;
 border-bottom: 2px solid #e7e4da;
}
.headding_line{
 width: 50px;
 margin-top: 0px;
 margin-bottom: 30px;
 border-top: 2px solid #e7e4da;
}

<div class="wrapper">
    <div class="one">
        <a  href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img  class="imagewidth" src="http://3.s3.envato.com/files/17065809/1_skywalker-template-preview.__large_preview.png"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom Facets</h3>
        </a>
    </div>
    <div class="one">
        <a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img  class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/thrill.jpg"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;">Bathroom </h3>
        </a>
    </div>
    <div class="one">
        <a    href="http://ironware.in/product-category/faucets/" style="    text-decoration: none;">
            <img class="imagewidth" src="http://www.ahrefmagazine.com/wp-content/uploads/2013/03/jscover_thumb.jpg"/><br>
            <h3 class="imagewidth"  id="h11" style="padding: 9px; text-align:center;"> Facets</h3>
        </a>
    </div>
</div>

and One thing i really want to suggest when you are asking the question please apply appropriate code structure in js fiddle or where ever you give the code cause one thing is that people will only answer if they will have to give minimum effort to understand and find the problem.

must need feedback whether work or not

Thanks man i vl make shore next not to stress any one , ur code is fine was expecting the same but i have a problem is that when they are in a larger screen they should come next to each other not one of the below — , Aug 12 '15 at 14:58
@Pauli then you can give the propertie float : left to the div having class='one' try by doing that — Himesh Aadeshara, Aug 12 '15 at 16:10

score 0 · Accepted Answer · answered Aug 12 '15 at 13:37

There are a lot of html/css problems, like the repeated ids. You will have other problems with them in the future, just so you know. But since they are not the reason for your question, I will not go into them.

Since you used width: 33% for your elements, you can give the images height: 33vw, which pretty much means to give a height equal to 33% of your viewport width. Note: this will stretch our image example

If you want the image to be padded instead, you need to add another container div: example

Resize, image of any size in Div

2 Answers2