Ensuring Mobile Compatibility: Maintaining Image Ratio Responsively on HTML with Minimum Height

I'm having trouble with inserting a full-width hero image. The issue arises on mobile devices where the height of the image appears too short based on its original proportions.

On large screens:

https://i.sstatic.net/U1tXC.jpg

On mobile screens:

https://i.sstatic.net/3ytPG.jpg

My goal is to have a slightly larger height than what is currently calculated for the mobile screen size. I thought about applying a min-height property to the image to achieve this.

Therefore, I added the following CSS:

img {
  min-height: 300px;
}

However, I know this is not the correct approach.

https://i.sstatic.net/8xA22.jpg

Any suggestions on how to fix this issue?

View Code Demo

htmlcssbootstrap-4responsive-images

Answer №1

Make sure to enclose the img block within its parent block. Define a minimum height for the parent block and ensure that the width of the img block is set to 100%. This approach will maintain the aspect ratio of the image, ensuring that its height matches or exceeds the specified height of the parent block. The parent block should either inherit the full width of the screen from its parent block or have an explicit width of 100%. Here's an example to illustrate this:

.block__image {
    /*width: 100%;*/
    min-height: 300px;
}

.block__image img {
    width: 100%;
}
<div class="block__image">
  <img src="https://i.sstatic.net/U1tXC.jpg" alt="image error">
</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

What is the best way to determine the dimensions of thumbnails for photos stored on external servers?

I am currently working on an auction platform using Python/Django. Users have the ability to input URL's for their product images from external sites like Photobucket. My approach involves linking to the external product image when showcasing a speci ...

htmlcssdjangoimagethumbnails

Trouble with background image displaying on meteor platform

Hey there! I'm in the process of replicating the HBO login page without functional links, but for some reason, the background image isn't loading properly. I suspect it might be an issue with resizing the image, but I can't pinpoint the exac ...

cssmeteorjsx

Retrieving the value of the option that has been selected from a dropdown

I have successfully implemented a drop-down menu with the following code: // Creating a select element for priority within a form in the bottom row div const formPriority = document.createElement("select"); formPriority.setAttribute("name","project"); form ...

javascripthtml

Having trouble getting background image transitions to work properly in CSS?

I'm encountering an issue with setting the transition CSS property for a hover effect, as it doesn't seem to be working correctly. Here is the relevant HTML: <div class = "menuItemBox" id = "Mughlai"> <p class = ...

htmlcsscss-transitions

Detecting a click on the background div in Angular without capturing clicks on child divs

Over at ollynural.github.io, I've been working on creating a pop-up div in the portfolio page that provides additional information about the project you select. To close the pop-up, I have implemented an ng-click feature so that clicking on the main p ...

javascriptcssangularjs

Top Bootstrap dropdown menu overlaid with Leaflet zoom buttons

I'm encountering an issue depicted in the screenshot below. Is this related to bootstrap or leaflet? How can I adjust the position/style of the dropdown menu so that it appears above all other elements? https://i.sstatic.net/cQhN5.png ...

csstwitter-bootstrapleaflet

Troubleshooting inactive CSS hover animation

Greetings! I'm facing an issue with a CSS hover animation. Here are two demos I've created: In the first DEMO, the animation works perfectly. However, in the second DEMO, it doesn't seem to be functioning. On the second demo, there are two ...

javascriptjquerycss

Begin the animation again by hitting the start button, using the burst-engine and canvas

I have successfully created a simple animation using Burst Engine and HTML5. My goal is to make the start button trigger the animation to restart if pressed twice. Currently, when I press it, the animation just starts and nothing else happens. I suspect t ...

javascripthtmlcanvas

JavaScript exit page trigger

I have successfully implemented a way to exit the page with a confirmation using window.onbeforeunload. However, I am curious about how I can customize the appearance of the exit confirmation box by adding CSS and HTML elements, instead of just displayin ...

javascripthtmlcss

Transform the radio selection into physical buttons with the Ruby on Rails Simple Form Gem

I've been struggling to achieve the desired layout when using the automatic wrappers generated by the Simple Form gem. I am working with Ruby on Rails and the Simple Form Gem, trying to create radio buttons with a specific design: https://i.sstatic.n ...

htmlruby-on-railsrubysimple-form

Having trouble accessing the value of an item in a dropdown box on a website

I am currently developing a webpage using HTML5 and Knockout Js. I am facing an issue where I am unable to retrieve the ID of the selected item from a dropdown box in order to insert a value into an SQL table. As an example, consider the following SQL tab ...

javascriptjqueryhtmlsqlknockout.js

Guide to implementing proportional height for an element using JQuery 3.3.1

I am currently working on dynamically setting the heights of elements with a specific class using JQuery in order to achieve a 16:10 ratio based on their width. However, I'm encountering an issue where the height doesn't seem to be applied and re ...

jquerycss

The CSS class is not properly implemented in the React component

I value your time and assistance. I have spent many hours trying to solve this issue but seem unable to reach a resolution. Here is the React component in question: import styles from './style.scss'; class ButtonComponent extends React.Compone ...

javascriptcssreactjswebpackreact-boilerplate

Section with relative positioning has taken an unexpected position

I'm facing a rather basic issue with positioning a relative div on my webpage. My layout consists of an absolute header that is 100vh tall, containing a headline and caption. Below the header, I have two section elements, both set to a relative posit ...

htmlcsscss-positiondisplay

There is no class present in the @Apply layer with Tailwind styling

I've been searching for what seems like a simple solution, but I can't seem to find it. While researching similar issues, I noticed that people were having problems with the Hover style and extra white space after it, which is not the issue in my ...

cssreactjstailwind-css

Mastering the Art of Utilizing Waypoints

Having trouble with waypoints and can't seem to make it work Here is the HTML code I am using: <section class="progress center" id="progress"> <h3>Skills</h3> <div class="bars"> <div class="progressbar"> < ...

jqueryhtmljquery-waypoints

What is the best way to ensure a textarea element fills the entire height using Bootstrap 4?

Is there a way to ensure the textarea element dynamically adjusts its height to fill the space between the header and footer without causing a scroll bar when using bootstrap 4? Here is the HTML code snippet I've been working with: #container { ...

htmlcssbootstrap-4

What is the approach to initiating a jquery function once HTML content is dynamically added through an AJAX call?

<div id="timeline"> <ul class="grow" id="grown"><li>One</li><li>Two</li><li>Three</li><li>Four</li><li>Five</li><li>Six</li><li>Seven</li><li>Eight< ...

phpjavascriptjqueryhtmlajax

Tips for achieving a seamless appearance with box-shadow on the left and right sides of various elements

.row { height: 300px; width: 300px; margin: 0 auto; box-shadow: 0 -20px 0px 0px white, 0 20px 0px 0px white, 12px 0 30px -4px rgba(0, 0, 0, 0.3), -12px 0 30px -4px rgba(0, 0, 0, 0.3); } <div class="row"></div> <div class="row">< ...

htmlcss

Delete the <script> tag prior to running

I am attempting to eliminate additional <script> tags from the body using only pure javascript. The HTML structure of the page in question is as follows: <html> <head> <script type="text/javascript"> var scripts ...

javascripthtml