How to Make Image Responsive Inside a Div

Responsive Image inside a div

you can make the height auto for the image, it should resize accordingly. Or you can just omit the height property, it's set to auto by default if you don't give it a value

https://jsfiddle.net/ahmadabdul3/4njw64s0/1/

update:

you can set a min-height/width so the image can do what you want. basically set the minimum height to 100% so it never get smaller height-wise. and then set the min-width to the width of the actual image, so it doesn't ever get smaller than that.

https://jsfiddle.net/ahmadabdul3/4njw64s0/4/

How to balance my image (and text) inside div and both must remains responsive

#wrapper{
    display:flex;
    width: 100%;
    justify-content: space-around;
}
.party{
    display:inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    padding: 2%;
    width: 33.33%;
}
.party-image-wrapper {
    position: relative;
    width: 100%;
    height: 0;
    border: solid black 2px;
    padding: 0.3%;
    padding-top: 100%;
    margin: 2%;
    max-width: 100%;
    max-height: 100%;
}
.party img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
input[type = button] {
    background-color: black;
    padding: 10px 20px;
    color: white;
    margin: 2px 1px;
    cursor: pointer;
}

<div id="wrapper">
    <div class = "party">
        <div class="party-image-wrapper">
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/3a/Cat03.jpg/1200px-Cat03.jpg">
        </div>
        <h3 style = "font-size: 2vw;">Party Events</h3>
        <p style = "font-size: 1.5vw;"> Want flower decoration for your birthday, ceremonies, baby showers and any party events? Consult to our florist now!</p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class ="party">
        <div class="party-image-wrapper">
            <img src = "https://upload.wikimedia.org/wikipedia/commons/thumb/4/4d/Cat_November_2010-1a.jpg/1200px-Cat_November_2010-1a.jpg">
        </div>
        <h3 style = "font-size: 2vw;"> Wedding Events </h3>
        <p style = "font-size: 1.5vw;">We offer free consultation for a bride-to-be. Call our store to make an appointment on <b>+64 85459 3943</b></p>
        <input type = "button" value = " Shop Now "/>
    </div>
    <div class = "party">
        <div class="party-image-wrapper">
            <img src = "https://i.guim.co.uk/img/media/26392d05302e02f7bf4eb143bb84c8097d09144b/446_167_3683_2210/master/3683.jpg?width=1200&height=1200&quality=85&auto=format&fit=crop&s=49ed3252c0b2ffb49cf8b508892e452d">
        </div>
        <h3 style = "font-size: 2vw;">Sympathy</h3>
        <center>
            <p style = "font-size: 1.5vw;"> Fresh flowers that express heartfelt thoughts and sincere condolences. Talk to our dedicated team by phone or come in to meet with our flourist in a private consultation.</p>
        </center>
        <input type = "button" value = " Shop Now "/>
    </div>
</div>

How to make image inside div is responsive?

You could try the following code:

.box1 img,
.box2 img,
.box3 img

{

width: 100%;
height:auto; 

}

Fill responsive div with responsive image

I think the easiest way, with nice browser compatibility would be something like this:

.item {  width: 30%;  height: 0;  padding-top: 30%;  display: inline-block;  background-size: cover;  background-position: center;}
.container {  display: flex;  justify-content: space-between;  flex-wrap: wrap;    resize: both;  overflow: auto;}

<div class="container">  <div class="item" style="background-image: url(https://dummyimage.com/600x400/000/fff)"></div>  <div class="item" style="background-image: url(https://dummyimage.com/400x400/000/fff)"></div>  <div class="item" style="background-image: url(https://dummyimage.com/300x400/000/fff)"></div></div>

How do I fit an image (img) inside a div and keep the aspect ratio?

You will need some JavaScript to prevent cropping if you don't know the dimension of the image at the time you're writing the css.

HTML & JavaScript

<div id="container">
    <img src="something.jpg" alt="Sample Image" />
</div>

<script type="text/javascript">
(function() {

var img = document.getElementById('container').firstChild;
img.onload = function() {
    if(img.height > img.width) {
        img.height = '100%';
        img.width = 'auto';
    }
};

}());
</script>

CSS

#container {
   width: 48px;
   height: 48px;
}

#container img {
   width: 100%;
}

If you use a JavaScript Library you might want to take advantage of it.

Position div inside a image (responsive)

Wrap the image and the caption in a div with position: relative like in this Fiddle

html

<div id="container" class="col-lg-3">
    <div class="img-container">
        <div class="positioning">
            Some Text
        </div>
        <img src="http://placehold.it/300x200/eeeeee" />
    </div>
</div>

CSS

.col-lg-3{
    width: 25%;
    min-width: 230px;
    float: left;
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px;
    background-color: #aaa;
    text-align: center;
}
.col-lg-3 img {
    max-width: 100%;
}
.img-container {
    display: inline-block;
    position: relative;
}
.positioning{
    position: absolute;
    right: 15px;
    bottom: 22px;
    background-color: red;
    color: white;
    padding: 4px;
    font-size: 17px;
    line-height: 18px;
}

make image width responsive to parent div

You can try to add

.guide-bg-warrior{
    background-image:url('images/hero_images/warriorbg.png');
    background-size: 100% auto;
}

Or, if you really want your image to cover all the div:

background-size: cover;

How to make images inside a box responsive CSS

I added float:none and margin:0 auto

.size-960 .line {  margin:0 auto;  max-width:55em;  /*fixes width of the template's main page layout*/  padding:0 0.625em; }.size-1140 .line {  margin:0 auto;  max-width:71.25em;  padding:0 0.625em;}.size-960.align-content-left .line,.size-1140.align-content-left .line {margin-left:0;}form {line-height:1.4em;}nav {  display:block;  width:100%;  background:#262626;}.line::after, nav::after, .center::after, .box::after, .margin::after {  clear:both;  content:".";  display:block;  height:0;  line-height:0;  visibility:hidden;}.box {  background:rgba(255, 255, 255, 0.6);  display:block;  padding:1.25em;  width:100%;  }.margin-bottom {margin-bottom:1.25em;}.s-1, .s-2,.s-five,.s-3, .s-4, .s-5, .s-6, .s-7, .s-8, .s-9, .s-10, .s-11, .s-12, .m-1, .m-2, .m-five, .m-3, .m-4, .m-5, .m-6, .m-7, .m-8, .m-9, .m-10, .m-11, .m-12, .l-1, .l-2, .l-five, .l-3, .l-4, .l-5, .l-6, .l-7, .l-8, .l-9, .l-10, .l-11, .l-12 {  float:left;  position:relative;}.l-offset-1 {margin-left:8.3333%;}.l-offset-2 {margin-left:16.6666%;}.l-offset-five {margin-left:16.6666%;}.l-offset-3 {margin-left:25%;}.l-offset-4 {margin-left:33.3333%;}.l-offset-5 {margin-left:41.6666%;}.l-offset-6 {margin-left:50%;}.l-offset-7 {margin-left:58.3333%;}.l-offset-8 {margin-left:66.6666%;}.l-offset-9 {margin-left:75%;}.l-offset-10 {margin-left:83.3333%;}.l-offset-11 {margin-left:91.6666%;}.l-offset-12 {margin-left:100%;} .s-1 {width:8.3333%;}.s-2 {width:16.6666%;}.s-five {width:16.6666%;}.s-3 {width:25%;}.s-4 {width:33.3333%;}.s-5 {width:41.6666%;}.s-6 {width:50%;}.s-7 {width:58.3333%;}.s-8 {width:66.6666%;}.s-9 {width:75%;}.s-10 {width:83.3333%;}.s-11 {width:91.6666%;}.s-12 {width:100%;}.margin > .s-1,.margin > .s-2,.margin > .s-five,.margin > .s-3,.margin > .s-4,.margin > .s-5,.margin > .s-6,.margin > .s-7,.margin > .s-8,.margin > .s-9,.margin > .s-10,.margin > .s-11,.margin > .s-12,.margin > .m-1,.margin > .m-2,.margin > .m-five,.margin > .m-3,.margin > .m-4,.margin > .m-5,.margin > .m-6,.margin > .m-7,.margin > .m-8,.margin > .m-9,.margin > .m-10,.margin > .m-11,.margin > .m-12,.margin > .l-1,.margin > .l-2,.margin > .l-five,.margin > .l-3,.margin > .l-4,.margin > .l-5,.margin > .l-6,.margin > .l-7,.margin > .l-8,.margin > .l-9,.margin > .l-10,.margin > .l-11,.margin > .l-12 {padding:0 0.625em;}.m-1 {width:8.3333%;}.m-2 {width:16.6666%;}.m-five {width:20%;}.m-3 {width:25%;}.m-4 {width:33.3333%;}.m-5 {width:41.6666%;}.m-6 {width:50%;}.m-7 {width:58.3333%;}.m-8 {width:66.6666%;}.m-9 {width:75%;}.m-10 {width:83.3333%;}.m-11 {width:91.6666%;}.m-12 {width:100%;}.l-1 {width:8.3333%;}.l-2 {width:16.6666%;}.l-five {width:20%;}.l-3 {width:25%;}.l-4 {width:33.3333%;}.l-5 {width:41.6666%;}.l-6 {width:50%;}.l-7 {width:58.3333%;}.l-8 {width:66.6666%;}.l-9 {width:75%;}.l-10 {width:83.3333%;}.l-11 {width:91.6666%;}.l-12 {width:100%;}.right {float:right;} 

<div class="line">            <div class="margin">            <h2 style="color:#000;text-align:center;"><strong>Technical</strong></h2>            <h3 style="color:#000;text-align:center;"><strong>UDG</strong></h3>               <div class="s-12 m-6 l-4 margin-bottom" style="float:none;margin:0 auto;">                  <div class="box">                     <h4 style="text-align:center;"><strong>John</strong></h4><br>                     <img src="img/del1.jpg" style="height:300px; ">                  </div>               </div>                                   </div>         </div>
         <div class="line">            <div class="margin">            <h3 style="color:#000;text-align:center;"><strong>General Administrators</strong></h3>                <div class="s-12 m-6 l-4 margin-bottom">                  <div class="box">                     <h4 style="text-align:center;"><strong>Ashley</strong></h4><br>                     <img src="img/sponsor3.jpg" style="height:268px; ">                  </div>               </div>               <div class="s-12 m-6 l-4 margin-bottom">                  <div class="box">                     <h4 style="text-align:center;"><strong>Susan</strong></h4><br>                     <img src="img/del3.jpg" style="height:300px; ">                  </div>               </div>               <div class="s-12 m-6 l-4 margin-bottom">                  <div class="box">                     <h4 style="text-align:center;"><strong>Sherley</strong></h4><br>                     <img src="img/del4.jpeg" style="height:300px; ">                  </div>               </div>            </div>         </div>         

---

Related Topics