Adjust the size of an image based on the size of the screen

Question

Adjust the size of an image based on the size of the screen

I am currently working on creating a navigation menu using icons that need to resize as the screen size changes. Here is my progress so far:

http://jsbin.com/yesitepuwo/edit?html,css,output [it's possible that the link does not work in firefox?]

Currently, when resizing the window, the images collapse and stack on top of each other before resizing properly. I would like them to only resize without collapsing. How can I achieve this?

If necessary, I am open to changing the HTML markup. However, at the smallest breakpoint, I would like to display a burger menu instead of the stacked icons. Is it possible to set a min-width for the images to prevent collapsing at this point?

Any help or suggestions would be greatly appreciated. Thank you! :)

css

Answer 1

Answer №1

Here is how you can style your list items:

ul{
  padding: 0px;
  border: 1px solid red;
}
ul:after {content:'';display:block;clear:both;}
li{
  display:block;
  float:left;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

If you prefer inline-block elements, use the following code:

ul{
  padding: 0px;
  border: 1px solid red;
}
li{
  display:inline-block;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

However, be sure to remove spaces between your li elements in order to avoid extra spacing due to inline-block elements being treated as words by the browser.

Answer 2

Here is how you can style your list items:

ul{
  padding: 0px;
  border: 1px solid red;
}
ul:after {content:'';display:block;clear:both;}
li{
  display:block;
  float:left;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

If you prefer inline-block elements, use the following code:

ul{
  padding: 0px;
  border: 1px solid red;
}
li{
  display:inline-block;
  max-width: 50%;
}
img {
  width:100%;
}
@media (max-width:300px) {
  li {max-width:100%;}
}

However, be sure to remove spaces between your li elements in order to avoid extra spacing due to inline-block elements being treated as words by the browser.

Answer 3

Answer №2

Here are a couple of methods that achieve the desired outcome:

https://jsbin.com/nexatoxewi/edit?html,css,output

https://jsbin.com/pibavejedo/edit?html,css,output

Answer 4

Here are a couple of methods that achieve the desired outcome:

https://jsbin.com/nexatoxewi/edit?html,css,output

https://jsbin.com/pibavejedo/edit?html,css,output

Adjust the size of an image based on the size of the screen

Answer №1

Answer №2

Similar questions

HTML containers continue to show gaps even with no margin or padding applied

How can I modify the color scheme of radio buttons to include a variety of different hues?

AngularJS push not reflecting changes in one div but working correctly in another unspecified div

Iphone not picking up media queries, while browser resize is working perfectly

Is there a way to expand "row" elements to the left side in Bootstrap?

Add hyphens to separate the words in AngularJS if there is a break in the string

Ways to align elements vertically in a container without using flexbox?

Position a div container to be aligned at the bottom of an image

Determine the total quantity of colored cells within a row of an HTML table and display the count in its own

aligning content that has exceeded the boundaries

Struggling with making Custom CSS take precedence over Bootstrap in a Wordpress Theme

Is it possible to apply CSS styling to all placeholders in a Sencha Touch application?

Modifying button appearance based on state change in AngularJS

Modifying the Color of Individual Items within the Pagination Component in MUI

Is it possible to integrate Bootstrap with RCloud?

What is the best way to utilize *ngFor for looping in Angular 6 in order to display three images simultaneously?

Angular 10 encountering issues with loading Bootstrap styles

React - The mechanics behind a spinning roulette wheel

Tips for aligning text to the left instead of the right when it exceeds container width in IE 11

Expand the image to fill the entirety of the viewing area