Images with varying heights: A bug in Chrome and Safari

I have a div that is absolutely positioned from the top and bottom of the screen.

The images inside the div are set to scale to fill the height, while maintaining proportionate width.

The images are displayed inline, and I've added white-space:nowrap to keep them in a row. Here's the CSS code:

section {position:absolute; top:100px; bottom:100px; font-size:0; left: 0; white-space: nowrap;}
section img {width:auto; height:100%; display:inline;}

This setup works perfectly in Firefox, but in Chrome and Safari there seems to be an issue when resizing the browser. The image adjusts its height properly, but the width remains constant.

You can view my simplified test case here: http://codepen.io/anon/pen/Beasx/

Any suggestions on how to fix this?

csshtmlfluid-layout

Answer №1

Visit this link for more details

In order to address the issue of distorted image resizing in Chrome, I found that the solution lies in the following code snippet:

section img {
  max-width:100%;
}

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

In IE9, users can select background elements by clicking on specifically positioned links

Trying to turn an li element into a clickable link by overlaying it with an a element set to 100% height and width. While this solution works in Chrome and FF, IE9 is causing issues as other elements behind the link remain selectable, rendering the link un ...

cssinternet-explorer-9

Video background in JavaScript

Can anyone help me with using the jQuery plug in videoBG to fill a top div with a video that has 100% width and height? I want the #top-video to fill the #top-content but nothing is showing up. Any suggestions would be appreciated. Thanks! <!DOCTYPE ...

javascripthtmlcssvideojquery-plugins

The iPhone is having trouble resizing background images in Bootstrap 5 Carousel

While working on my website using the Bootstrap 5 carousel template, I encountered an issue with the carousel images not resizing correctly on my iPhone. The images appear zoomed in to the upper left corner and cut off on smaller devices. I've attemp ...

cssbootstrap-5bootstrap-carousel

Form submission not being recognized by Ajax's .done() function

I'm trying to include a form from another file using ajax. It's a simple form that is activated by an onclick event defined as follows: <a href="javascript:void(0);" class="remitir" title="Reemitir Solicitud" data-id="'.$value['idso ...

javascriptjqueryhtmlajaxsubmit

"Incorporating PHP, CSS, and HTML to handle large volumes of data with dynamic columns and

I have a large dataset of around 10,000 entries that I need to display on my website. I am hoping to implement filters so that only a few thousand entries will be shown at a time. Languages: HTML, PHP, CSS After considering different options, I came up w ...

phphtmlcssdynamic

How can you apply the min-width property to a CSS element floating to the right?

Check out this demonstration When utilizing float:right in the CSS rules, the html does not adhere to the specified min-width. .right { float:right; background:blue; min-width:400px; } By removing the float:right or adjusting it to float:lef ...

htmlcss-floatcss

jQuery accordion section refuses to collapse

In order to achieve the desired outcome, each Section should initially appear in a collapsed state. Panel 0 and 2 start off collapsed, however, panel 1 does not but can be collapsed upon clicking. Additionally, Panel 1 incorporates an iframe that displays ...

jqueryhtmlcssjquery-uitwitter-bootstrap-3

Listen to audio files of any type within any web browser

Each time I record audio on different mobile devices, the files are saved in various formats such as: .m4a, .3ga, .amr Now, my challenge is figuring out how to play these audio files in a web browser. <audio controls height="100" width="100"> ...

htmlaudioaudio-streaminghtml5-audio

How do I set up a 5 column layout for the home page and switch to a 4 column layout for category pages in Magento?

Is it possible to display 5 columns of products on the Magento home page and only show 4 columns in the category area, or is this a pre-set parameter that applies platform-wide? ...

phpcssmagento

Ways to create distance between elements within a row

Trying to align 3 cards in a row within an angular 10 project has been challenging. While the cards line up horizontally on mobile devices, I'm struggling to create proper spacing between them on desktop. I've attempted adjusting margins and padd ...

htmlcssangulartwitter-bootstrapbootstrap-4

Issues with vertical repeating in CSS Sprites

Hey there, I'm currently working on implementing css sprites in my web application. The challenge I'm facing is that I have organized the background of my website vertically within a sprite image. Now, one specific portion of the sprite needs to ...

csscss-sprites

Getting style information from a parent element in ReactJS involves accessing the parent component's CSS properties

Is there a way to automatically change the color of text inside a button component based on the color of the button itself? I'm trying to access the parent element's color in my text component. Here's what I have: const MyText = (props) => ...

javascriptcssreactjstypescriptnext.js

Align an image vertically beside a paragraph

I've been attempting to align an image, which is typically shorter in height than the paragraph next to it, in the middle vertically but just can't seem to figure it out. <div class="element"> <img src="http://dummyimage.com/75" /& ...

htmlcss

What is the best way to show the current value of a checkbox element in the future?

I want to add multiple checkboxes using this method: $(".btn-sample").on("click", function() { $(".container").append( '<input class="check-sample" type="checkbox" value="'+check_value+'"/>' ); }); The issue I' ...

javascriptjqueryhtmldomcheckbox

What steps can be taken to resolve this issue?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ut ...

font-sizecss

Hooray - Locate and display all attributes that correspond to the search criteria

Suppose I have some HTML code like this: <a class="my-lovely-name" title="hello" href="fb.com">Random stuff</a> <div class="my-lovel-name" title="ew" href="yb.com">blabla</div> I want to figure out how to extract all the values of ...

javascripthtmlnode.jscheerio

The presentation of an HTML table varies between Gmail and web browsers

<table width="100%" border="0" cellspacing="0" cellpadding="0"> <tr> <td> <table width="100%" height="131" border="0" cellspacing="0" cellpadding="0"> <tr> <td wid ...

htmlcss

Contrasting float-start and start-0 characteristics

I'm attempting to recreate the layout shown in this image using HTML and Bootstrap 5: https://i.sstatic.net/R6Naf.jpg I'm having trouble with the alignment of the elements. When I use float-start for the image, it aligns properly, but start-0 do ...

htmlpositionbootstrap-5card

How do I display a table created using data from another SQL table in a database?

I have been assigned the task of displaying a table on screen that is created using SQL and PHP, however, the structure of the SQL table is not suitable for my needs. The original source table looks like this: ╔═════════════ ...

phphtmlmysqlsql

Tips for styling jqgrid header columns with CSS

Currently, I am creating a table using jqgrid. One of my objectives is to modify the background color and text color of the header. In my attempts to achieve this, I am experimenting with applying a class to the header. How can I effectively implement th ...

jquerycssjqgrid