Picture not adapting correctly to various screen sizes

Question

Picture not adapting correctly to various screen sizes

I'm looking to adjust the size of an image based on the user's browser window. Here is the code I have so far:

.image {
  max-height: 15%;
  width: auto;
}

The image class is used in this section of my code:

<ul>
  <li>
    <img class="image" src="imgs/pie-chart.png">
  </li>
</ul>

I want the image to scale down on smaller windows and remain at its maximum size on larger windows. However, despite implementing the code, there are no visible changes to the image when viewed on the webpage. Additionally, I am utilizing bootstrap in conjunction with this code.

html css

Answer 1

Answer №1

Utilizing viewport width (vw) can be a great solution. Don't forget about viewport height(vh) as well. Experiment by clicking on "full page" and adjusting the browser window size.

.image {
  max-height: 15%;
  width: 10vw;
}

<ul>
  <li>
    <img class="image" src="https://pngimg.com/d/free_PNG90785.png">
  </li>
</ul>

Answer 2

Utilizing viewport width (vw) can be a great solution. Don't forget about viewport height(vh) as well. Experiment by clicking on "full page" and adjusting the browser window size.

.image {
  max-height: 15%;
  width: 10vw;
}

<ul>
  <li>
    <img class="image" src="https://pngimg.com/d/free_PNG90785.png">
  </li>
</ul>

Answer 3

Answer №2

To effectively control the size of an image based on the user's browser window, CSS media queries provide a valuable solution. By utilizing CSS media queries, you can define specific styling rules tailored to various screen sizes. As an illustration, consider employing the following media query to reduce the image dimensions for smaller windows:

@media (max-width: 500px) {
  .image {
    max-height: 10%;
    width: auto;
  }
}

With this approach, the image will adjust to 10% of the window's maximum height when it is 500px or less. Furthermore, media queries offer the flexibility to apply distinct styling rules based on different window sizes. For instance, utilize the subsequent media query to enlarge the image for larger windows:

@media (min-width: 1000px) {
  .image {
    max-height: 20%;
    width: auto;
  }
}

This method will scale the image to 20% of the window's maximum height when it reaches 1000px or more.

Answer 4

To effectively control the size of an image based on the user's browser window, CSS media queries provide a valuable solution. By utilizing CSS media queries, you can define specific styling rules tailored to various screen sizes. As an illustration, consider employing the following media query to reduce the image dimensions for smaller windows:

@media (max-width: 500px) {
  .image {
    max-height: 10%;
    width: auto;
  }
}

With this approach, the image will adjust to 10% of the window's maximum height when it is 500px or less. Furthermore, media queries offer the flexibility to apply distinct styling rules based on different window sizes. For instance, utilize the subsequent media query to enlarge the image for larger windows:

@media (min-width: 1000px) {
  .image {
    max-height: 20%;
    width: auto;
  }
}

This method will scale the image to 20% of the window's maximum height when it reaches 1000px or more.

Picture not adapting correctly to various screen sizes

Answer №1

Answer №2

Similar questions

Code in JavaScript that shows only a portion of the selected option in a dropdown menu

Can you conceal the label while also displaying the placeholder?

Discrepancy in Table Alignment

Before beginning my selenium scripts, I need to figure out how to set an item using Ruby in the browser's localStorage

What could be causing the issues I am encountering while using IE8?

Passing data from one NodeJS page to another

Issues arise when HTML components are not functioning correctly upon calling JSON

Ways to retrieve the CSS class names associated with an element

How can one HTML form be used to request a unique identifier from the user, retrieve a record from the database, parse it into JSON format, and then populate an HTML page form using the

After selecting "ok" on the JavaScript alert dialog, the webpage will automatically refresh, causing all information entered into the textboxes to be erased

Limiting the movement of an HTML range slider within a specific range

Change the absolute positioning of a div element to be applied globally

Is the menu not appearing in the header section of the HTML/CSS?

Trouble locating SVG element in Google Calendar when using Python

Retrieve the text content of a datalist option by accessing the label with jQuery

Tips for resolving the issue of "Unable to assign property '_DT_CellIndex' to undefined in Jquery Datatable"

What might be preventing me from achieving a full-length page using height 100% or height 100vh?

Guide on adding dual horizontal scroll bars to a v-data-table (Vue / vuetify)

The PNG image keeps getting cropped

Issue with iPad CSS floats causing layout problems?