Unusual behavior observed with Chrome image resizing

I've encountered an odd issue with Chrome related to image resizing when the window size changes.

When I have Chrome snapped fullscreen in Windows (double-clicking to snap), and then unsnap the window, the images are not scaling correctly back to their original size.

For instance, I utilize the following CSS code to resize images to fit 100% of the available height while maintaining the width:

img{
    height: 100%
    width: auto;
}

While the images maintain their aspect ratio when Chrome is snapped fullscreen, if I unsnap the window, only the height will adjust, leaving the width unchanged as shown below:

In contrast, when using Internet Explorer, the images resize properly when unsnapping the window.

Do you know why Chrome is behaving this way? Could there be an issue with my CSS?

If more code is needed, please let me know.

Thank you.

cssinternet-explorergoogle-chrome

Answer №1

Instead of using width:100%, try max-width:100%;

I encountered a similar problem in the past, and successfully resolved it by implementing both size properties.

img{
    max-width:100%;
    max-height:100%;
}

This solution worked perfectly for me and maintained the image proportions.

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

Creating a running text (marquee) with CSS is a simple and efficient way to make

I encountered a significant challenge while delving into CSS animation. My goal is to create a "transform: translate" animation that displays text overflowing the content width as depicted in the image below. https://i.stack.imgur.com/sRF6C.png See it i ...

javascripthtmlcsscss-animations

Ways to center-align this menu (Spanish language)

I am working on optimizing the alignment of the menu on my website: My goal is to center the menu, as the English version looks good. #site-navigation { width: 980px; margin: 0 auto; text-align: left; } After analyzing the code, we have iden ...

htmlcss

When applying a vertical-align property to both an anchor tag and a button with the same class, why is the span also aligned to the top?

Why is the span tag aligning to the top when I have only applied properties to the .btn class elements, and not targeted it directly? .btns { text-align: center; } .btn { text-decoration: none; border: 1px solid black; display: inl ...

htmlcssbuttonalignment

css hover function not operational with back to top button

I have implemented a back to top button using the following resource: Although the button is functioning as expected, I am encountering an issue with the hover effect. In Chrome inspector, manually forcing hover on .cd-top does not apply the CSS style as ...

htmlcss

Flask does not display images in CSS files

Starting with the frontend (HTML, CSS) of my project, I then proceeded to create a Flask file with the following code: from flask import Flask, render_template app = Flask(__name__) @app.route("/", methods=["GET"]) def index(): return render_templa ...

pythonhtmlcssflask

Insert a section of background within the div

Does anyone know how to create a div with a partial background like the example shown here? https://i.sstatic.net/CDqCe.png I attempted to add white margin, but I'm struggling to get it right. ...

htmlcss

When a child element within a flex container has a relative position, the flex direction column will be overridden and

I'm having trouble with the code snippet below. For the .container, I have set display:flex; flex-direction: column; in order to position my previous and next arrows before and after the container items. However, the flex direction does not change ...

htmlcssflexbox

What happens in the React tutorial when the clear fix is commented out and the appearance does not change?

Currently, I am working through the React tutorial and have encountered a question regarding their starter code: class Square extends React.Component { render() { return ( <button className="square"> {/* TODO */} </butto ...

javascripthtmlcssreactjs

Is there a way to stop text from wrapping between words and punctuation marks using CSS or jQuery?

There is a paragraph containing some text. One issue I am facing is that punctuation at the end of a word may get wrapped to the next line, as shown here: This is the sentence, This is a new line Is there a way to fix this using CSS or jQuery? ...

javascriptjqueryhtmlcsswordpress

What is the best way to overlay a video onto an image using HTML and CSS?

Currently, I am experimenting with a layering technique in HTML/CSS. The idea is to place an image behind a video to enhance the overall look of the video section. Here is a sample photoshop mockup that demonstrates what I am aiming for: HTML div id= " ...

htmlcssimagevideo

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

There is a perplexing issue that I am unable to resolve. The "Shop" section on this page has an intriguing translucent blue-green background: This background is set using the ID "#left-area". Interestingly, on another page, which can be found at , the sam ...

css

Stacking sheets of hole-punched paper on top of one another, create a visually captivating

I am in search of a way to create those distinctive black dots with papers displayed here: body { background: linear-gradient(#ccc, #fff); font: 14px sans-serif; padding: 20px; } .letter { background: #fff; box-shadow: 0 0 10px rgba ...

javascripthtmlcss

Is there a way to implement a scrollbar that only scrolls through one specific column in an HTML table?

I need help adding a scrollbar to a specific column in an HTML table. Take a look at this scenario https://jsfiddle.net/6wpdc4tL/: https://i.stack.imgur.com/svzIg.png This table should have two scrollbars, one for the light blue SCROLL column and another ...

javascripthtmlcsshtml-table

Tips for creating CSS3 animations in Angular triggered by mouse clicks

I'm working with a span that utilizes a Bootstrap icon. My goal is to fade out and fade in the same element (span) on click, while toggling the class (icon). There's a boolean variable called showLegend which determines whether or not to animate ...

htmlcssangularanimation

Adjust the size of the Div and its content to fit the dimensions of

Currently, I have a div containing elements that are aligned perfectly. However, I need to scale this div to fit the viewport size. Using CSS scale is not an option as it does not support pixel values. https://i.stack.imgur.com/uThqx.png I am looking to ...

javascripthtmlcss

Safari (mac) experiencing issues with loading material icons properly on initial attempt

Upon my initial visit to the website, I noticed that the font appeared distorted. https://i.sstatic.net/BtUxI.png However, when I right-clicked and chose "reload page", the fonts were displayed correctly. https://i.sstatic.net/3XUcA.png This issue seem ...

cssangularsafariiconsmaterial-design

Utilize CSS to exclusively filter through items

Is it possible to use CSS alone to filter a list of items based on specific links being clicked? I have a list that should display only certain items when corresponding links are clicked. HTML: <!-- Header links --> <a href="#" class="all" tabin ...

htmlcssselectfiltertabindex

What is the best way to customize the text in the navigation bar at the top of the page

I'm having trouble with the Navigation Bar code in my header. The text is not staying within the header and I can't seem to fix it. Is there a CSS solution to keep the text contained within the header? <div class="header"> <img src= ...

htmlcss

unable to modify background color when mouse hovers in CSS

Recently, I implemented this code to style the navigation bar on my website. However, I encountered an issue where the color does not change when hovering over the links. .nav { list-style-type:none; margin:0; padding:0; overflow:hidden; } ...

htmlcss

Choose all list elements except the final one

I need to display a list of tags horizontally and add a comma after each item except for the last one. Here is how I can achieve this using CSS: ul.tags { list-style: none; } ul.tags > li { display: inline; } ul.tags > li:after { con ...

htmlcsscss-selectors