Resizing Background-Image Always Proportionally to Scale with a Center Point

Resizing background-image always proportionally to scale with a center point

You are looking for this combination:

background-position:50% 50%;  /* Sets reference point to scale from */
background-size:cover;        /* Sets background image to cover entire element */

Working sample fiddle here.

Note that this is not supported by IE8 and will require JS hackery there if you need IE8 or older to be supported.

How to correctly scale down the background image proportionally?

you set your background-size to contain so it contain your image in your height

.banner {

    height: 100px;

    background: #3B3E44 url("https://jstock.org/images/banner.png");

    background-repeat: no-repeat;

    background-size: contain;

    background-position: center;

}

<div class="banner"></div>

CSS force image resize and keep aspect ratio

img {

  display: block;

  max-width:230px;

  max-height:95px;

  width: auto;

  height: auto;

}

<p>This image is originally 400x400 pixels, but should get resized by the CSS:</p>

<img width="400" height="400" src="http://i.stack.imgur.com/aEEkn.png">

Stretch and scale a CSS image in the background - with CSS only

CSS3 has a nice little attribute called background-size:cover.

This scales the image so that the background area is completely covered by the background image while maintaining the aspect ratio. The entire area will be covered. However, part of the image may not be visible if the width/height of the resized image is too large.

Overlay over proportionally sized background image

Since you mention that the aspect ratio of the image will always be 4:3 (e.g. 1600 × 1200), then there is a rather straight-forward solution: all you need is to give .placeholder a background image of identical aspect ratio, and position it absolutely relative to its parent .prop, and you're good to go.

Update your code with the following additional styles:

.prop {
    position: relative;
}

.placeholder {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3"><rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect></svg>');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

Explanation: here I have used a 4px by 3px SVG with a <rect> element set to have a fill of red and reduce the fill's opacity to 0.5:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3">
    <rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect>
</svg>

You can use this SVG markup as part of the data URI for the background-image property. See proof-of-concept example:

.prop {

  background-image: url('http://via.placeholder.com/1600x1200');

  width: 100vw;

  background-size: contain;

  height: 100vh;

  background-position: center;

  background-repeat: no-repeat;

  border: inset 70px transparent;

  box-sizing: border-box;

  position: relative;

}

.placeholder {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  

  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 4 3"><rect style="fill: red; fill-opacity: 0.5;" width="4" height="3" x="0" y="0"></rect></svg>');

  background-size: contain;

  background-position: center;

  background-repeat: no-repeat;

}

<div>

  <div class="prop">

    <div class="placeholder"></div>

  </div>

</div>

CSS background image to fit height, width should auto-scale in proportion

background-size: contain; 

suits me

How to keep aspect ratio of a background-image?

Use background-size: cover; to cover the entire element, while maintaining the aspect ratio:

.background-1,

.background-2,

.background-3 {

  /* Set the background image, size, and position. */

  background-image: url('//via.placeholder.com/350x150');

  background-size: cover;

  background-position: center;

  /* Or, use the background shortcut. */

  background: url('//via.placeholder.com/350x150') center/cover;

  margin: 20px;

  border: 1px solid rgba(0, 0, 0, 0.3);

}

.background-1 {

  width: 300px;

  height: 200px;

}

.background-2 {

  width: 200px;

  height: 50px;

}

.background-3 {

  width: 100px;

  height: 200px;

}

<div class="background-1"></div>

<div class="background-2"></div>

<div class="background-3"></div>

Changing image sizes proportionally using CSS

This is a known problem with CSS resizing. Unless all images have the same proportion, you have no way to do this via CSS.

The best approach would be to have a container, and resize one of the dimensions (always the same) of the images. In my example I resized the width.

If the container has a specified dimension (in my example the width), when telling the image to have the width at 100%, it will make it the full width of the container. The auto at the height will make the image have the height proportional to the new width.

Example:

HTML:

<div class="container">
    <img src="something.png" />
</div>

<div class="container">
    <img src="something2.png" />
</div>

CSS:

.container {
    width: 200px;
    height: 120px;
}

/* Resize images */
.container img {
    width: 100%;
    height: auto;
}

---

Related Topics