how to create proportional image height/width


Tags: html,css,image-resizing

Problem :

So, I want to have an image resized to 30% of its original height/width. Pretend you don't know its height or width, how would you go about it using only CSS/HTML?



Solution :

Update:

Using a display: inline-block; wrapper, it's possible to make this happen with CSS only.

HTML

<div class="holder">
    <img src="your-image.jpg" />
</div>

CSS

.holder {   
  width: auto;
  display: inline-block;    
}

.holder img {
  width: 30%; /* Will shrink image to 30% of its original width */
  height: auto;    
}​

The wrapper collapses to the original width of the image, and then the width: 30% CSS rule on the images causes the image to shrink down to 30% of its parent's width (which was its original width).

Here's a demo in action.


Sadly no pure HTML/CSS way to do it as neither is geared to perform calculations like that. However, it's pretty simple with a snippet of jQuery:

$('img.toResizeClass').each(function(){

    var $img = $(this),
        imgWidth = $img.width(),
        imgHeight = $img.height();

    if(imgWidth > imgHeight){
        $img.width(imgWidth * 0.3);
    } else {
        $img.height(imgHeight * 0.3);
    }
});

    CSS Howto..

    urls being shown after links when printing web page

    How do I show annotations on my Google Chart that extracts data from a Google Spreadsheet?

    How to create dropdown with multiple columns?

    How to show a title in the border of a div [duplicate]

    How to correctly wait until JavaScript applies inline Css

    CSS - How to make rectangle with pointed sides? [duplicate]

    Can't make any different fonts show up on website with @font-face or google fonts

    How can I get horizontal overflows to work in CSS?

    How can I place three block of contents in one line in a way that the middle block is always full width?

    how to hover after calling jquery animate()

    Django - how to collapse forms like in the django admin

    How to set img tag vertical center : html + css

    How can i put this SVG ‘Sidebar Menu’ in the right side?

    how to remove a TR which have a TD that contain specific text

    Showing responsive menu link that is not shown in regular navigation menu

    how can resize dynamically the logo of the header?

    How to Include CSS and JS files via HTTPS when needed?

    How can I properly display my divs in masonry style using flex?

    How to modify css in OpenERP 7?

    How can I set up a static Webkit Mask

    how to download google fonts in version bold

    How to toggle ng-class

    HTML divs, how to wrap content?

    How to get CSS triangles to display in a row instead of vertical

    How can i Split Menu Bar in two lines

    jQuery - How to animate text simultaneously to color change transition

    How to make a frame around CSS component from a picture source

    Css Trick - How to align this div

    How to bring parent div front?

    How can you hide the arrow that is displayed by default on the HTML5
    element in Chrome?