Scale Image with CSS to Both Width and Height to Scale

Scale image with css to both width and height to scale

You can set only width or only height to 100%. E.g.

img {
    width: 100%;
}

img {
    height: 100%;
}

That will preserve the image scale, but the image might overflow the container.

This might not work in all browsers, but it does in the latest versions of Firefox, Chrome and Opera. I've had weird experiences with this in the past and my solution was to calculate the new image size on the server.

CSS - Image height won't scale with width

Use

align-items: center

on the container to prevent it from stretching its children.

.floatingImage {  width: 50px;  height: auto;}
#floatingImageContainer {  background-color: red;  width: 75%;  height: 100%;  margin: auto;  display: flex;  flex-wrap: wrap;  justify-content: center;  align-items: center;}

<body>  <div id="floatingImageContainer">    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>    <img src="http://lorempixel.com/g/400/200/" class="floatingImage"/>  </div></body>

Is it possible to scale an image proportionally both on width and height based on a fixed container?

One way is to use object-fit:

img {
  object-fit: contain;
  width: 200px;
  height: 200px;
}

JSFiddle Demo: https://jsfiddle.net/t75cxqt0/2/

Scale an image only by width or height

Setting height to auto should work. For example:

<img src="#" width="42" height="auto">

If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly.

This will work for all modern browsers and works for both % and px, em sizes ect.

See W3schools

Or using inline styles:

<img src="#" style="width:42; height:auto;">

Edit: I'm not sure you did not mean give height a value and make width resize automatically. In which case width: auto should do fine.

CSS: scale two images proportionally to each other and to the screen

I don't have images, but I drew two div tags with the colors you had above. You can replace those with the images you want.

Effectively, you make an container overlay and then put the images within that overlay.

You can also change the height to auto as they are images. I needed to use 100% for the div demo.

.outline-box
{  position: relative;
   border: 2px solid Black;
   padding-top: 40%;
}

.pic-container
{  
   position: absolute;
   width: 50%;
   height: 30%;
   
   left: 5%;
   top: 5%;
}

.pic-container .pic1
{  background-color: Gray;
   width: 100%;
   height: 100%;
   position: absolute;
   z-index: 1;
}

.pic-container .pic2
{  background-color: Coral;
   width: 30%;
   height: 20%;
   right: 5%;
   top: 5%;
   position: absolute;
   z-index: 2;
}

<div class="outline-box">
 <div class="pic-container">
  <div class="pic1"></div>
  <div class="pic2"></div>
 </div>
</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;
}

Scale Image with CSS to Both Width and Height to Scale