Enclose an image with a <div> element while maintaining the <div> height at

Question

Enclose an image with a <div> element while maintaining the <div> height at

Encountering a challenge where positioning an element on top of an image at specific coordinates (20% from the top and 30% from the left) is required.

Initially, the solution involved wrapping the image in a div with a relative position and using absolute positioning for the element. However, this approach failed to work consistently across different browsers.

Upon loading the provided fiddle, the dummy image displays correctly initially. Yet, when adjusting the size of the window in Chrome or Firefox, the red div containing the image becomes visible, causing the element to shift from its intended position. Interestingly, this issue does not occur in Safari.

The main question now is: How can the image be kept tightly wrapped at all times?

UPDATE: It is essential that the div containing the image remains 100% the size of its parent without deviation.

Fiddle: http://jsfiddle.net/12q26xu7/2/

html,
body {
  height: 90%;
  padding: 0;
  margin: 0;
  text-align: center;
}
.child-wrapper {
  height: 50%;
}
.image-wrap {
  position: relative;
  height: 100%;
  display: inline-block;
  background: red;
  border: 1px solid blue;
}
.image-wrap img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: middle;
}
.image-wrap .point {
  position: absolute;
  left: 20%;
  top: 30%;
  border-radius: 50%;
  background: #000000;
  width: 10px;
  height: 10px;
}

<html>

<body>
  <div class="child-wrapper">
    <div class="image-wrap">
      <img class="viewer__image" src="http://dummyimage.com/300">
      <div class="point"></div>
    </div>
  </div>
</body>

</html>

javascript jquery html css

Answer 1

Answer №1

To set the height and width of your div as automatic, use the following CSS code:

.image-wrap {
    position:relative;
    height: auto;
    width:auto;
    display: inline-block;
    background: green;
    border: 1px solid black;
}

Check out the updated fiddle here

UPDATE

In response to your revised query regarding maintaining 100% height with aspect ratio width, achieving this might require JavaScript. The following script should help accomplish this:

$('.image-wrap').each(function () {
    var wrap = $(this),
        image = wrap.children('img:eq(0)'),
        ratio = image.width() / image.height();

    wrap.data('ratio', ratio);
});

$(window).resize(function () {
    $('.image-wrap').each(function () {
        var wrap = $(this),
            image = wrap.children('img:eq(0)'),
            width = image.height() * wrap.data('ratio');

        image.width(width);
        wrap.width(width);
    });
});

See the example in action

Answer 2

To set the height and width of your div as automatic, use the following CSS code:

.image-wrap {
    position:relative;
    height: auto;
    width:auto;
    display: inline-block;
    background: green;
    border: 1px solid black;
}

Check out the updated fiddle here

UPDATE

In response to your revised query regarding maintaining 100% height with aspect ratio width, achieving this might require JavaScript. The following script should help accomplish this:

$('.image-wrap').each(function () {
    var wrap = $(this),
        image = wrap.children('img:eq(0)'),
        ratio = image.width() / image.height();

    wrap.data('ratio', ratio);
});

$(window).resize(function () {
    $('.image-wrap').each(function () {
        var wrap = $(this),
            image = wrap.children('img:eq(0)'),
            width = image.height() * wrap.data('ratio');

        image.width(width);
        wrap.width(width);
    });
});

See the example in action

Answer 3

Answer №2

When it comes to the basics, there are three key elements to consider:

Ensuring an image (or its wrapping div) matches the height of its parent div
Maintaining the image's aspect ratio
Resizing the image based on the viewport height and width

After experimenting together, we found that a solution could not be achieved solely with CSS. This led me to propose the idea of obtaining the height of the parent div and applying it to the image.

This approach resulted in the following solution:

OPTION 1

By implementing the following jQuery snippet (along with a jQuery library), the image preserves its ratio when the window is resized:

$(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});

$( window ).resize(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});

You must also remove any dimensions specified in the CSS for .image-wrap and .image-wrap img, leaving you with:

.image-wrap {
  position: relative;
  display: inline-block;
  background: red;
  border: 1px solid blue;
}

.image-wrap img {
  vertical-align: middle;
}

JSFIDDLE

OPTION 2

If desired, you can incorporate box-sizing: border-box; so the border becomes part of the div rather than surrounding it. However, this may cause the image to overflow, necessitating the removal of 2 pixels (or the border thickness) from the image. This adjustment can be easily made using the following modified jQuery code tailored for use with box-sizing:

$(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});
    
$( window ).resize(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});

JSFIDDLE

Both of these examples require some fine-tuning to ensure they function as intended within your project.

Answer 4

When it comes to the basics, there are three key elements to consider:

Ensuring an image (or its wrapping div) matches the height of its parent div
Maintaining the image's aspect ratio
Resizing the image based on the viewport height and width

After experimenting together, we found that a solution could not be achieved solely with CSS. This led me to propose the idea of obtaining the height of the parent div and applying it to the image.

This approach resulted in the following solution:

OPTION 1

By implementing the following jQuery snippet (along with a jQuery library), the image preserves its ratio when the window is resized:

$(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});

$( window ).resize(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap, .image-wrap img" ).css('height', height + 'px');
});

You must also remove any dimensions specified in the CSS for .image-wrap and .image-wrap img, leaving you with:

.image-wrap {
  position: relative;
  display: inline-block;
  background: red;
  border: 1px solid blue;
}

.image-wrap img {
  vertical-align: middle;
}

JSFIDDLE

OPTION 2

If desired, you can incorporate box-sizing: border-box; so the border becomes part of the div rather than surrounding it. However, this may cause the image to overflow, necessitating the removal of 2 pixels (or the border thickness) from the image. This adjustment can be easily made using the following modified jQuery code tailored for use with box-sizing:

$(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});
    
$( window ).resize(function() {
  var height = $('.child-wrapper').height();
  $( ".image-wrap" ).css('height', height + 'px');
  $( '.image-wrap img').css('height', height -2 + 'px');
});

JSFIDDLE

Both of these examples require some fine-tuning to ensure they function as intended within your project.

Enclose an image with a <div> element while maintaining the <div> height at

Answer №1

Answer №2

Similar questions

Evaluate numerical values using xsl:choose function

Grid item overlay

Adjusting the height of a CSS div to be 0 while also modifying the

Unusual behavior exhibited by MUI Grid in the presence of spacing

Add a hyperlink within a button element

Understanding the process of extracting map data from JSON files

Is there a way to make the iOS Safari address bar shrink when scrolling, all while having a flexbox sticky footer inside a container?

Is there a way to specifically import only variables and mixins from Sass stylesheets?

Transmit a document to the OpenAI API without the need to interact with the file storage system

Having trouble directing input to embedded swf upon page load in Opera

Acknowledge that a checkbox was found to be unchecked while editing a php/html form

Display jqgrid with borders and insert extra headers text at the top of the grid

Adding images sourced from the News API

What is the process for extracting an array from an object?

Jquery Flexigrid at your service

Sending a JSON object with scheduled task cron job

Ways to guide user after logging out

Adjust date by one day using the Datetimepicker tool

Using an Ajax Post Call to send FormData leads to a Get request instead

Leading astray — using htmlentities will not function