CODEWITHSUNDEEP
htmlcssimage
Swarup Modak
Swarup Modak

Reputation: 47

Auto fit image in DIV is not working in bloger

I have written the following code to auto fit image in DIV. It is perfectly working in JSFIDDLE but not working in my blog http://roadroute.blogspot.in/2015/08/flipkart.html

Please find the code below

.responsive-container1 {
    position: relative;
    width: 250px;
    height: 415px;
    border: 1px solid red;
    margin-right: 10px; 
    margin-top:10px; 
    float: left; 
}

.dummy {
    padding-top: 100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
}

.img-container img {
    max-width: 100%;
    max-height: 100%;
    margin: auto;
    vertical-align: middle;
    display: inline-block;
}
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
    </div>
</div>

Please help.

Upvotes: 1

Views: 88

Answers (2)

ketan
ketan

Reputation: 19341

You should remove following css:

.dummy {
    padding-top: 100%;
}

.img-container {
    bottom: 0;
    font: 0px/0 a;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}

And .post-body img have have padding: 8px; will put/display your image outside div. Either remove that Or make image max-width: 90%;.

It will wok for you.

Edit:

Give: text-align:center to .responsive-container1.

.responsive-container1 {
    border: 1px solid red;
    float: left;
    height: 415px;
    margin-right: 10px;
    margin-top: 10px;
    position: relative;
    text-align: center;
    width: 250px;
}

And max width and height 90% and give position and top value And also give transform.

.post-body img {
    background: #222222 none repeat scroll 0 0;
    border: 1px solid transparent;
    border-radius: 0;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0.2);
    max-height: 90%;
    max-width: 90%;
    padding: 8px;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}

It will do the trick.

Upvotes: 1

Kunjan Shah
Kunjan Shah

Reputation: 86

just add

width:100%; height:100%;

in your image container class. 

.responsive-container1 {
    position: relative;
    width: 250px;
    height: 415px;
    border: 1px solid red;
    margin-right: 10px; 
    margin-top:10px; 
    float: left; 
}

.dummy {
    padding-top: 100%;
    max-width:100%;
    max-height:100%; /* forces 1:1 aspect ratio */
}

.img-container {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align:center; /* Align center inline elements */
    font: 0/0 a;
    max-width:100%;
    max-height:100%;
}

.img-container:before {
    content: ' ';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    max-width:100%;
    max-height:100%;
}

.img-container img {
    width: 100%;
    height: 100%;
    margin: auto;
    vertical-align: middle;
    display: inline-block;
}
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/01.jpg" alt=""/>
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/02.png" alt="" />
    </div>
</div>
<div class="responsive-container1">
    <div class="dummy"></div>
    <div class="img-container">
        <img src="https://googledrive.com/host/0BxPZgr7ebTBdTkowMFVRTDJTS00/03.jpg" alt="" />
    </div>
</div>

Upvotes: 1

Related Questions