Utilize CSS to ensure that images are equal in height to their container element

Question

Utilize CSS to ensure that images are equal in height to their container element

This is the markup

div.shadow | div#content |img.shadow |

Is there a way to ensure that the shadow images always maintain the same height as the content area? The challenge lies in the fact that the content area can adjust its size based on different factors, such as tabs with varying heights or sections that appear conditionally. While I managed to use JavaScript to set the initial height of the shadows, it becomes problematic when the #content height changes dynamically.

Perhaps this clarifies the issue

http://jsfiddle.net/uLUnf/28/

The real question is

How can I ensure that the images (grey boxes) resize proportionately to the content (light grey box)?

javascript html css

Answer 1

Answer №1

http://jsfiddle.net/uLUnf/29/

Did you solve this on your own? :P

Answer 2

http://jsfiddle.net/uLUnf/29/

Did you solve this on your own? :P

Answer 3

Answer №2

One possible solution is to incorporate the resize function within the content adding function. Here's how you can do it:

jQuery('document').ready(function($){
    $('#click_me').click(function(){
       var id = $(this).attr('href');
       $(id).show(); 
       $('.shadow').height($('#content').outerHeight());
    });

    $('.shadow').height($('#content').outerHeight());
})()

Alternatively, you might consider eliminating the use of shadow images and resizing altogether, opting to add a border to the content directly in the CSS:

#content{
    float: left;
    display: block;
    background: #eee;   
    width: 200px;
    border-right: 7px solid #666;
    border-left: 7px solid #666;
}

Answer 4

One possible solution is to incorporate the resize function within the content adding function. Here's how you can do it:

jQuery('document').ready(function($){
    $('#click_me').click(function(){
       var id = $(this).attr('href');
       $(id).show(); 
       $('.shadow').height($('#content').outerHeight());
    });

    $('.shadow').height($('#content').outerHeight());
})()

Alternatively, you might consider eliminating the use of shadow images and resizing altogether, opting to add a border to the content directly in the CSS:

#content{
    float: left;
    display: block;
    background: #eee;   
    width: 200px;
    border-right: 7px solid #666;
    border-left: 7px solid #666;
}

Utilize CSS to ensure that images are equal in height to their container element

This is the markup

Perhaps this clarifies the issue

The real question is

Answer №1

Answer №2

Similar questions

Breaking down objects or arrays to extract specific values in React components

The fs.fsync(fd, callback) function in the node.js API allows you

Is there a way to initiate a callback function once all the contents of an UpdatePanel have been fully loaded?

Error on JSP Hello Page

The conditional comment designed for browsers other than Internet Explorer may not work properly on outdated versions of

updating react state based on filtered redux properties

Differences Between Data Captured from Form Submissions and Data Obtained Through Ajax

Switching from a layout of 3 columns to 2 columns on iPad when orientation is changed to portrait

Generate visual representations of data sorted by category using AngularJS components

Navigating back to the beginning of the webpage following the completion of a form submission utilizing Master Pages and Ajax

Identifying mobile device model

Guide on configuring and executing AngularJS Protractor tests using Jenkins

AngularJS : Resolving Alignment Issues with ng-repeat and ng-include

The meteorite experienced a crash as startup.js attempted to connect with Mongo

Achieving vertical center alignment for the label and btn-group in Bootstrap

Div element failing to scroll with excessive content

Is Jade used for making subsequent lines children of an included partial?

Error: The $http variable in Vue Resource is not defined

Using JavaScript to trigger actions via links or buttons inside a table will only function properly in the first row

What is the process of extracting data from a variable and inserting it into a JSON object in JavaScript?