What is the correct way to make an image adjust to changes in a browser's size?

Question

What is the correct way to make an image adjust to changes in a browser's size?

I'm in a bit of a quandary: How can I ensure that an image resizes properly based on viewport size?

So, here's the challenge - I have an image that is 400 pixels wide and 400 pixels tall. My aim is for it to occupy only 90% of the width of the viewport (90vw) upon resizing the browser window. Currently, this is the CSS code I am using:

img {
  width: 400px;
  height: 400px;
}

@media screen and (max-width: 400px) {
  img {
    width: 90vw;
    height: 90vh;
  }
}

The hitch I've run into is that the image doesn't seem to adjust at all with this current setup.

If I replace width with max-width, only the width changes, leaving me with a distorted elliptical image due to the unadjusted height.

Is there a simple solution to rectify my issue?

css mobile responsive-design media-queries responsive

Answer 1

Answer №1

To prevent distortion when styling an image with CSS, it's best to set either the height or width and allow the other dimension to adjust automatically. For example, if your image is sized at 400px × 400px, you can use the following code:

#myImg {
  width: 400px;
  height: auto;
}
@media (max-width: 440px) {
  #myImg { 
    width: 90vw;
  }
}

/* optional, for centering */
#myImg {      
  display: block;
  margin: 0 auto;
}

<img src="http://via.placeholder.com/400x400" id="myImg">

You can experiment with this setup by visiting this link. The choice of using 440px in the media query was made to avoid a sudden drop in size from 400px to 360px across the 400px device width threshold. Feel free to customize this value based on your needs.

Answer 2

To prevent distortion when styling an image with CSS, it's best to set either the height or width and allow the other dimension to adjust automatically. For example, if your image is sized at 400px × 400px, you can use the following code:

#myImg {
  width: 400px;
  height: auto;
}
@media (max-width: 440px) {
  #myImg { 
    width: 90vw;
  }
}

/* optional, for centering */
#myImg {      
  display: block;
  margin: 0 auto;
}

<img src="http://via.placeholder.com/400x400" id="myImg">

You can experiment with this setup by visiting this link. The choice of using 440px in the media query was made to avoid a sudden drop in size from 400px to 360px across the 400px device width threshold. Feel free to customize this value based on your needs.

Answer 3

Answer №2

Consider using the object fit property for better control over image resizing.

img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

@media screen and (max-width: 400px) {
  img {
    width: 90vw;
    height: 90vh;
  }
}

Alternatively, you can use a background image approach for improved browser compatibility.

Answer 4

Consider using the object fit property for better control over image resizing.

img {
  width: 400px;
  height: 400px;
  object-fit: cover;
}

@media screen and (max-width: 400px) {
  img {
    width: 90vw;
    height: 90vh;
  }
}

Alternatively, you can use a background image approach for improved browser compatibility.

Answer 5

Answer №3

To achieve this, you will have to define two separate @media queries - one for adjusting the layout horizontally and another for making vertical adjustments. Both of these queries should be set at a maximum width and height of 400px. In the horizontal adjustment query, only utilize the width property, while in the vertical adjustment query, focus solely on the height property:

body {margin: 0}

img {
  display: block; /* removes bottom margin/whitespace */
}

@media (max-width: 400px) {
  img {width: 90%}
}

@media (max-height: 400px) {
  img {height: 90vh}
}

<img src="http://placehold.it/400x400" alt="">

Answer 6

To achieve this, you will have to define two separate @media queries - one for adjusting the layout horizontally and another for making vertical adjustments. Both of these queries should be set at a maximum width and height of 400px. In the horizontal adjustment query, only utilize the width property, while in the vertical adjustment query, focus solely on the height property:

body {margin: 0}

img {
  display: block; /* removes bottom margin/whitespace */
}

@media (max-width: 400px) {
  img {width: 90%}
}

@media (max-height: 400px) {
  img {height: 90vh}
}

<img src="http://placehold.it/400x400" alt="">

What is the correct way to make an image adjust to changes in a browser's size?

Answer №1

Answer №2

Answer №3

Similar questions

Error encountered while scrolling with a fixed position

Is there a way to encase numerous <tbody> elements together?

Animating rows in the grid auto property

What is the best way to navigate back to the top of the page once a link has been clicked?

align items center with respect to my central element

Problem with padding in Firefox when using jQuery's css() methodInconsistent behavior with padding property in

Explore a variety of themes for the antd design token

There seems to be an issue with the CSS file linking properly within an Express application

Showing information to several classes using JavaScript

Guide to generating customized CSS styles on-the-fly in Vue (similar to Angular's dynamic styling capabilities)

showing divs in a compact layout on smaller screens using Bootstrap 5

Incorporating additional value attributes without replacing the existing ones

Can the loaded image from the css sprite be displayed on the screen?

How can you quickly navigate to the top of the page before clicking on a link in the same window/tab?

What is the best way to resize my hamburger menu and achieve a flawlessly circular border for it?

Optimizing Window Width with React.js and CSS

Use jQuery to replace this color with that color in CSS every time it appears

VueJS component fails to remain anchored at the bottom of the page while scrolling

CSS query: How to eliminate the extra space at the top of a webpage?

AngularJS: How to automatically scroll to the bottom of a div