How to fit whole image in to div which have his dimensions

Question

<div class = "container">
  <div class = "row">
    <small>Original picture size is 876x493, I resize it to:</small>
    <div class = "property">
      <img src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/>
    </div>
    <small>Result I want to get (in another way):</small>
    <div class = "property">
      <img style = "max-width: 147%" src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/>
    </div>
  </div>
</div>

https://jsfiddle.net/40ay7uco/

I want to reduce my image to fit it in div. How I can do it with jquery or css, without mannualy writing like I did before.

p.s. I want to keep width:height ratio

Instead of max-height / max-width, simply use height / width. See here: https://jsfiddle.net/40ay7uco/2/ — Phiter, Jan 09 '16 at 14:44
@NenadVracar, thanks for advice, but properties will be displayed by php code, so this way is not suitable for me — zhinyz, Jan 09 '16 at 14:47
@zhinyz Maybe you could do something like this and generate image url in `data-background` attr with php https://jsfiddle.net/40ay7uco/6/. — Nenad Vracar, Jan 09 '16 at 14:54

Parth Raval · Answer 1 · 2019-10-31T11:14:26.860

4

<div id="img" style="width:50px;height:50px">
  <img src="https://via.placeholder.com/150" alt="image" style="width:100%" />
</div>

First, give that div appropriate size as you want and then give your Image 100% width.

edited Oct 31 '19 at 11:14

answered Jan 09 '16 at 15:14

Parth Raval

4,097
3
23
36

Phiter · Answer 2 · 2016-01-09T15:01:46.800

2

You were setting max dimensions for your image, so it would only appear on it's own resolution. Letting the width be an automatic size will keep the ratio.

This should work:

.property {
    border: 3px solid white;
    box-shadow: 0px 0px 5px #aaaaaa;
    width: 270px;
    height: 200px; /*This will keep aspect ratio for your image*/
    overflow: hidden;
}
.property img {
    height: 100%; /*This will keep aspect ratio for your image*/
    width: auto;  /*Not necessary since this is the default value*/
}

<div class = "container">
  <div class = "row">
    <div class = "property">
      <img src = "http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1"/>
    </div>
  </div>
</div>

As you can see the image is going outside the div even tho it cant be seen.

edited Jan 09 '16 at 15:01

answered Jan 09 '16 at 14:47

Phiter

14,570
14
50
84

I want to keep width:height ratio – zhinyz Jan 09 '16 at 14:52
Oh I see, let me check – Phiter Jan 09 '16 at 14:53
Tanks, it works, but only with images which width is greater than height. Maybe you know solution for both image types? – zhinyz Jan 09 '16 at 15:07
In this case you would need Javascript w/ Jquery: http://stackoverflow.com/questions/24944354/css-preserve-aspect-ratio-but-fill-parent-div – Phiter Jan 09 '16 at 15:09

Stickers · Answer 3 · 2016-01-09T15:35:18.487

2

I think object-fit is what you're looking for. Be aware of the browser support tables.

jsfiddle

.object-fit {
  width: 200px; /*any size*/
  height: 200px; /*any size*/
  object-fit: cover; /*magic*/
  border: 3px solid white;
  box-shadow: 0px 0px 5px #aaaaaa;
  box-sizing: border-box;
}

<img class="object-fit" src="http://i.imgur.com/4fYhkO2.png" />

edited Jan 09 '16 at 15:35

answered Jan 09 '16 at 15:26

Stickers

75,527
23
147
186

score 1 · Answer 4 · answered Jan 09 '16 at 14:57

If you want keep dimension the width of image should auto.

.property {
  border: 3px solid white;
  box-shadow: 0px 0px 5px #aaaaaa;
  width: 270px;
  height: 200px;
  overflow: hidden;
}

.property img {
  max-width: 100%;   /*Should remove*/
  max-height: 100%;  /*Should remove*/
  width: auto;
  height: 100%;
}

I edited your code. You can checkout https://jsfiddle.net/dtv6bk75/

score 1 · Accepted Answer · answered Jan 09 '16 at 15:30

You can set background-image with JQuery and use background-size: cover; on property div

$('.property').each(function() {
  var background = $(this).data('background');
  $(this).css('background-image', 'url('+background+')');
});

.property {
    border: 3px solid white;
    box-shadow: 0px 0px 5px #aaaaaa;
    width: 270px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "container">
  <div class = "row">
    <small>Original picture size is 876x493, I resize it to:</small>
    <div class = "property" data-background="http://a57.foxnews.com/global.fncstatic.com/static/managed/img/Leisure/2009/876/493/big-house-small-house.png?ve=1&tl=1">
    </div>
    
    <div class = "property" data-background="http://placehold.it/350x150">
    </div>
    
    <div class = "property" data-background="http://placehold.it/700x500/ffffff/000000">
    </div>
</div>

How to fit whole image in to div which have his dimensions

5 Answers5