First, the image is reduced by width until it reaches its maximum width, then the height is adjusted proportion

Question

First, the image is reduced by width until it reaches its maximum width, then the height is adjusted proportion

I have an image with the dimensions of 1200 x 200px. In the center of this image, there is a space measuring 500 x 200px which represents the main content of the entire image. Flanking this main content are additional contents on each side. It is important to note that all these elements exist within a single image.

When the window width is reduced, the first thing to be cut off should be the additional content, while maintaining the height of the image. However, once the window width is reduced below the width of the main content (resulting in the cutting off of all additional content), the image should then be resized proportionally, affecting its height as well.

My questions:

Is it possible to achieve this using only CSS?
If not, are there any JS libraries available for this purpose?
If not, how should I structure the HTML, CSS, and JS to make it work?

Example of a full-width banner: Take note that there is a main content area surrounded by additional content on either side.

https://i.sstatic.net/csRha.png

The following image should help illustrate: I have attempted to simulate a resizing of the window width from 1200px to 1000px and eventually down to 500px (without affecting the height), followed by a further reduction to 350px where the image is resized proportionally.

https://i.sstatic.net/KSHEZ.png

javascript jquery html css image

Answer 1

Answer №1

#banner {
  background-image: url("https://i.sstatic.net/csRha.png");
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  border: 1px solid red;
}

@media all and (min-width: 1200px) {
  #banner {
    width: 1200px;
  }
}

@media all and (max-width: 1200px) {
  #banner {
    background-position: 50% 0;
  }
}

@media all and (max-width: 500px) {
  #banner {
    background-size: 240%;
  }
}

<div id="banner"></div>

Answer 2

#banner {
  background-image: url("https://i.sstatic.net/csRha.png");
  width: 100%;
  height: 200px;
  background-repeat: no-repeat;
  margin: 0 auto;
  display: block;
  border: 1px solid red;
}

@media all and (min-width: 1200px) {
  #banner {
    width: 1200px;
  }
}

@media all and (max-width: 1200px) {
  #banner {
    background-position: 50% 0;
  }
}

@media all and (max-width: 500px) {
  #banner {
    background-size: 240%;
  }
}

<div id="banner"></div>

Answer 3

Answer №2

Can this be achieved using only CSS?

Absolutely! You can accomplish this with just one <div>. Simply treat the image as a background image and position it perfectly in the center using background-position. Then, adjust the size of the <div> using media queries by setting specific widths at breakpoints.

Answer 4

Can this be achieved using only CSS?

Absolutely! You can accomplish this with just one <div>. Simply treat the image as a background image and position it perfectly in the center using background-position. Then, adjust the size of the <div> using media queries by setting specific widths at breakpoints.

Answer 5

Answer №3

If you want to adjust the size of an image based on the screen width, consider using a basic media query such as this:

@media max-width: 500px {
  #your-image {
    width: 100vw;
  }
}

Answer 6

If you want to adjust the size of an image based on the screen width, consider using a basic media query such as this:

@media max-width: 500px {
  #your-image {
    width: 100vw;
  }
}

Answer 7

Answer №4

Implement media queries to incorporate images/elements and modify CSS styles. To address your issue with image resizing, consider using percentages. I recommend researching progressive enhancement and Responsive design principles. Additionally, familiarize yourself with the view-port if you haven't already. Avoid utilizing VW units as they lack sufficient support in browsers like IE, EDGE (no VMAX support), Opera Mini, and IE8 (no support at all).

Answer 8

Implement media queries to incorporate images/elements and modify CSS styles. To address your issue with image resizing, consider using percentages. I recommend researching progressive enhancement and Responsive design principles. Additionally, familiarize yourself with the view-port if you haven't already. Avoid utilizing VW units as they lack sufficient support in browsers like IE, EDGE (no VMAX support), Opera Mini, and IE8 (no support at all).

First, the image is reduced by width until it reaches its maximum width, then the height is adjusted proportion

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Having difficulty breaking down values from an object

How can I implement a jQuery modal dialog that loads a form page with pre-existing jQuery code for Autocomplete functionality?

Adjust the image size in the jumbotron to fit perfectly without the need for scrolling

Display a notification next to the pinned location on the map using the Google Maps API

What is the best way to implement dynamic variables in ng-model-options?

Is there a way to narrow down Drive API list results based on a specific domain that has write permission?

Creating an HTML list based on the content of a textarea input

How do I retrieve and pass values from multiple inputs in my React application?

json undefined result or results when viewing in MVC

`How can I extract HTMLElements from slots in vue3?`

The Ajax deletion request yields a 200 response code; however, it triggers an error instead of the

What steps are needed to set up my Express server so that it can render all my content, rather than just my HTML file?

PHP code to launch a pop-up on a remote computer

Utilizing Node.js callback for validating JWT tokens

Is there any advantage to placing buttons within an HTML form?

Trouble with CSS display in Internet Explorer 8

Looking to retrieve object values in JavaScript in a dynamic manner?

Discover the ultimate guide on developing a personalized file management system using the powerful node.js platform!

Integrating fresh models into Django and creating dedicated pages for each

Interpreting an undefined HTTP GET request within a Node.js server