Image with fluid dynamics centered in a div - resize simultaneously with div

Question

Image with fluid dynamics centered in a div - resize simultaneously with div

I'm working on a fully fluid web page with a parent DIV set to width: 100%. Inside this div, there's an image with the following style:

<div>
     <img src="image.png" alt="" />
</div>

<style>
    div { width: 100%; }
    img {
      display: block;
      margin: auto;
      max-width: 100%;
    }
</style>

The image is centered within the div, but there is white space between the borders of the image and the div since the image is smaller than the parent DIV. When I resize the browser window, the image does not resize until the parent DIV reaches the image borders.

If I were to set the image's width to 100%, it would stretch beyond its actual size...

I want the image to scale immediately with the div when the browser window is resized. If the image canvas were set to 100% of the parent div, I could achieve this desired behavior. However, I am unable to set images up in that way...

css image resize centering fluid-layout

Answer 1

Answer №1

Using pure CSS alone may not achieve this effect, but you can incorporate jQuery for the desired outcome - http://jsfiddle.net/VcJ6s/

var aspectRatio = $("img").parent().width() / $("img").width();

$(window).resize(function() {
    $("img").width( $("img").parent().width() / aspectRatio + "px" );
});

Answer 2

Using pure CSS alone may not achieve this effect, but you can incorporate jQuery for the desired outcome - http://jsfiddle.net/VcJ6s/

var aspectRatio = $("img").parent().width() / $("img").width();

$(window).resize(function() {
    $("img").width( $("img").parent().width() / aspectRatio + "px" );
});

Image with fluid dynamics centered in a div - resize simultaneously with div

Answer №1

Similar questions

Toggle the visibility of table rows based on a specific class using a checkbox

Getting the css property scaleX with JQuery is as simple as executing the

Tips for ensuring Accordion menu closes upon clicking a second time

Troubleshooting a CSS layout issue: Creating a list with images, text, and animated image scaling

Utilizing transitions to control the visibility of div elements

Tips for obtaining the sources of every image on a webpage and consolidating them in a single section

Adjusting the body element's width and background hue

Emotion (Mui) in Next.js project does not properly apply inline stylesheets in Chrome

hover-related problems when using bootstrap

Expanding Width and Height Using CSS3 Flexbox

Adjusting the header background color and inserting a logo once a specific threshold is reached

Slide the toggle icon to activate the add-to-cart button on click!

Is there a way to keep my fixed button at a consistent size while zooming on mobile devices?

What methods can I employ to dynamically style SVG elements that have been generated programmatically?

Using the "checked" attribute in an HTML input to hide content with CSS when blocks are positioned in different

Modify the style of .asp files (CSS)

Element with a fixed position within an iScroll container

What is causing my HTML wrapper to malfunction?

Expanding the flexbox container to accommodate additional divs when they are added

Mastering the art of selecting checkboxes and Font Awesome icons with JQuery