Make the image responsive by aligning the right side accordingly

I am working on making an image responsive using HTML and CSS. My goal is to have the right side of the image crop as the screen size decreases to maintain the height and position of the image, similar to Nike's hero image. I want to keep the white space on the left and right sides of the image intact when resizing the screen. How can I achieve this effect? Here is a snippet of my code:

.hero {
  position: relative;
  text-align: center;
  top: 6.7rem;
  width: 100%;
}

.hero>img {
  width: 100%;
  max-width: 1330px;
  height: 690px;
  object-fit: cover;
}
<div class="hero">
  <img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="">
</div>

htmlcss

Answer №1

I believe we have the option to include additional properties in the CSS while keeping the HTML code unchanged.

        .hero {
            position: relative;
            text-align: center;
            width: 70vw;
            margin: 0 auto;
        }

        .hero>img {
            width: 70vw;
            object-fit: cover;
            margin: 0 auto;
        }
<div class="hero">
  <img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="">
</div>

Answer №2

After receiving some guidance, I was able to achieve my desired result by implementing the following CSS code. I appreciate the assistance from everyone who helped me.

.hero {
    position: relative;
    text-align: center;
    top: 6.7rem;
    width: 100%;
}

.hero>img {
    width:90%; /* Occupy the full width of the container */
    max-width: 1330px; /* Ensure the image doesn't exceed its natural dimensions */
    height: 690px;
    object-fit:cover;
}

Answer №3

If you want to create a responsive image that maintains its height and crops the right side as the screen size reduces, the key is to utilize CSS along with the object-fit property. It is important to not only adjust the container's size but also ensure the desired aspect ratio is maintained.

Check out this example to see how you can achieve this effect:

.hero {
  position: relative;
  text-align: center;
  width: 100%;
  max-width: 1330px; /* Specify your preferred max width */
  margin: 0 auto; /* Horizontally center the container */
  overflow: hidden; /* Conceal overflowing content */
 }

.hero img {
  width: 100%;
  height: auto; /* Let the image determine its own height */
  object-fit: cover; /* Crop the image to cover the container */
 }
<div class="hero">
       <img src="https://static.nike.com/a/images/q_auto:eco/t_product_v1/f_auto/dpr_2.0/w_441,c_limit/9d1635ed-eed0-45b0-b34d-e00468e2f79e/tanjun-easyon-shoes-mplG1H.png" alt="">
     </div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Reveal the concealed button with a jQuery click event

I have a simple question that has been elusive to find an answer for on the internet. Can anyone please help? <input hidden="true" class="btnsubmit" id="myaddslide2" onClick="UPCURSLIDE()" type="button" value="UPDATE"> <script> function ...

javascriptjqueryhtmlcss

I am having trouble with the spacing on my website, even after I have tried declaring it

I'm having trouble formatting the footer to appear at the bottom of the page. I've tried adjusting the CSS code for the .container and .footer classes, but nothing seems to work. As a newbie in website development, any helpful tips or suggestions ...

htmlcss

Tips for personalizing the appearance of a button sourced from a library

Currently, I am utilizing a button from a library called https://www.npmjs.com/package/@react-oauth/google. Although this library offers a custom button feature, I have noticed that it produces a different response. My goal is to adjust the max-width and ...

htmlcssfrontend

When the browser size shrinks, turn off the drop-down navigation menu

I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...

htmlcssdrop-down-menuresponsive-designnav

Comparing `height: calc(100vh);` to `height: 100vh;` in CSS can reveal a few

Currently tackling a project where the previous developer utilized: .main-sidebar { height: calc(100vh); } Unfortunately, I can no longer reach out to them, and I am curious about the variance (if any) between the two approaches. (Am I in the approp ...

htmlcssuser-interfacecross-browser

Changing the designated materialUI class

Within the project, I am utilizing this theme: export const theme = createMuiTheme({ ...defaultThemeConfig, overrides: { ...defaultThemeConfig.overrides, MuiListItem: { root: { '&:nth-child(odd)': { backgro ...

javascriptcssreactjsmaterial-ui

Switching the arrow direction in Bootstrap 4 menu toggles

I'm a beginner with Bootstrap 4. My navigation menu includes a dropdown item with the standard caret pointing down, added automatically by Bootstrap. Now, I want to make the caret point up after opening the dropdown menu for the nav item. Despite ext ...

jquerycsstwitter-bootstrapbootstrap-4caret

Align the date input field to the center for better visual appeal

I am facing a challenge in centering the date in an input, not the entire input element inside a div. When I attempt to center it, the date gets positioned within a portion of the input due to a resizable right-hand side panel for selecting a date from a c ...

javascriptjquerycsshtml

Altering the background color of the navigation bar when scrolling

So, my navigation bar starts with a transparent background, but I wanted it to change to a different background color when a user scrolls down. I found a solution in this question: Changing nav-bar color after scrolling? My current code now looks like th ...

jquerycss

The issue arises when I try to retrieve information from MySQL using Ajax, as it appears

I am currently working on developing an ecommerce website. In order to display products, I am fetching data from a database. My goal is to allow users to add products to their cart without having to refresh the page. I have attempted to use AJAX for this ...

javascriptphphtmlmysqlajax

Creating a dynamic shift in background color

Is it possible to use jQuery to slowly change the color of diagonal lines in a background styled with CSS, while also adding a fading effect? I have created a fiddle with the necessary CSS to display a static background. You can view it here: http://jsfid ...

javascriptjqueryhtmlcssfade

Transform Unicode characters into HTML using Qt

I am facing an issue with a particular string that includes Unicode characters and special symbols. The string, for instance, looks like this: SYMBOLSU+2510\n The string contains the Unicode character U+2510 and a new line symbol \n. I have a lo ...

htmlqtunicode

What is preventing me from loading js and css files on my web pages?

I have developed a web application using SpringMVC with Thymeleaf and I am encountering an issue while trying to load javascript and CSS on my HTML5 pages. Here is a snippet from my login.html: <html xmlns="http://www.w3.org/1999/xhtml"> <head&g ...

javascripthtmlcssspring-mvc

In need of styling text using CSS?

Despite setting the CSS to .text { word-wrap : break-word; max-width: 100px}, the text is not wrapping as expected. It is still displaying in a single line. I am anticipating that the large text should wrap onto the next lines. ...

javascripthtmlcss

Strategies for aligning a div element in the middle of the screen

Positioned in the center of the current viewport, above all other elements. Compatible across different browsers without relying on third-party plugins, etc. Can be achieved using CSS or JavaScript UPDATE: I attempted to use Javascript's Sys.UI.Dom ...

javascriptcss

Keeping information saved locally until an internet connection is established

I have a vision to develop a Web app focused on receiving feedback, but the challenge lies in the fact that it will be utilized on a device without an internet connection. The plan is for it to save any user input offline until connectivity is restored. Th ...

phpmysqlajaxhtmllocal-storage

Chrome geolocation feature does not display the permission popup for JavaScript

After the latest Chrome update, we have noticed that the popup to Allow/Block accessing a user's location from a website is no longer appearing. We tested this on Edge, Firefox, and different mobile devices, where it seems to be working fine. Current ...

javascripthtmlgoogle-chromegeolocation

Having trouble selecting a box with Selenium Webdriver in Python

When using Selenium Webdriver with Python, I am facing an issue clicking on the box that contains the text "24h". Here is my code snippet: from selenium import webdriver from PIL import Image from selenium.webdriver.chrome.service import Service import ti ...

pythonhtmlselenium

Struggling to make @font-face function properly

I am attempting to incorporate a custom font into my website. In my CSS file, I have the following: body { font-family: HurmeGeometricSans4_SemiBold; } @font-face { font-family: HurmeGeometricSans4_SemiBold; src: url(resources/Hurme_Design_-_ ...

htmlcss

Image overlaying the full width of body content background

I am trying to find a solution to my problem, but so far no luck. The Body selector has a max-width of 85%, and there are other selectors like header which I want to have a background image that spans 100% of the width behind the body selector attribute. ...

cssbackground-image