CODEWITHSUNDEEP
htmlcssresponsive-design
Robert
Robert

Reputation: 2486

CSS: center and scale up or down image while preserving aspect ratio

How to center and scale up or down image while preserving aspect ratio in html/css?

I have a fiddle showing my current solution, but it does not scale up the image when needed (see last div): http://jsfiddle.net/4Mvan/438/

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}

.resize_fit_center {
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

I need a solution that is working in all major browsers (IE10+)

Thanks

Upvotes: 1

Views: 1910

Answers (4)

Adam Tegen
Adam Tegen

Reputation: 25887

If you know the aspect ratio of the image ahead of time, you can use media queries with aspect-ratio.

In this case, I know my image is has a 4:3 aspect ratio.

With the media queries, it lets me toggle between filling the height when the height is the limiting dimension (aspect ratio wider than 4/3) and filling the width when the width is the limiting dimension.

img {
  height: 100%;
  width: auto;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

@media screen and (max-aspect-ratio: 4/3) {
  img {
    height: auto;
    width: 100%;
  }
}

https://jsfiddle.net/0cjc23oz/

Upvotes: 1

Asons
Asons

Reputation: 87191

You can drop the inner img element and do like this.

This will work no matter image proportions.

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    border: 1px solid red;
    background: url(http://i.imgur.com/H9lpVkZ.jpg) no-repeat center center;
    background-size: contain;    
}
<div class='container'>
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
</div>

This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
</div>

If you know each image prop. for each container you can simply keep your html and do this.

.container {
    margin: 10px;
    width: 115px;
    height: 115px;
    line-height: 115px;
    text-align: center;
    border: 1px solid red;
}
.resize_fit_center {
    vertical-align: middle;
}
.fit_width {
    width:100%;
}
.fit_height {
    height:100%;
}
<div class='container'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

<div class='container' style='width:50px;height:100px;line-height:100px'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

<div class='container' style='width:140px;height:70px;line-height:70px'>
    <img class='resize_fit_center fit_height'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

This one should scale up
<div class='container' style='width:350px;height:350px;line-height:350px'>
    <img class='resize_fit_center fit_width'
      src='http://i.imgur.com/H9lpVkZ.jpg' />
</div>

Upvotes: 2

Prime_Coder
Prime_Coder

Reputation: 161

Well, you are using fixed width for elements. try to use relative units (in %) and make max-width to 100%. I think this will work.

Upvotes: -1

Matvey Andreyev
Matvey Andreyev

Reputation: 1061

Add width:100%; height:auto; to your .resize_fit_center so it becomes this:

.resize_fit_center {
    width:100%;
    height:auto;
    max-width:100%;
    max-height:100%;
    vertical-align: middle;
}

Upvotes: 0

Related Questions