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..

    How to wrap text without whitespace? [duplicate]

    How do you make an image or button glow when you mouse over using javascript or jquery?

    How do I pick an image from a set of images on my Ajax form?

    How to display a custom css animation with jquery and fall back to just show() if not supported?

    Should be easy jQuery loop, but can't seem to figure out how to cycle through this

    How hard is it to make an expanding tab in CSS?

    How can I center my ul li list inside my div?

    How do I auto play my slideshow

    How to detect all events added on a div

    How to make bootstrap row “col-md-4” fullscreen size

    How can I use javascript, html and css to make an image a button, which can do the following?

    How to print on a specific paper

    How to change tooltip style in jQuery vmap?

    How can browsers resolve icon libraries that aren't specifically referenced in the frontend code?

    How to navigate to the top of a div?

    How to override default css style rule of Bootstrap

    How to inherit Image width and height to video tag

    How to use display:flex in CSS to create a mix of fixed with and dynamic proportional width columns?

    How to underline list items separately with CSS?

    Responsive Design - how to get my image on left to take up whole screen

    Create template page for showing jpg's from direct links [closed]

    How to create a menu 'toolbar' like on the default Google homepage?

    HTML & CSS: How do I completely remove the scroll-bars on the side of
    ?

    How can I make a button apply a class to the next div in the document flow?

    How can I slide the sidebar out of view and make the content flexbox resize to fill the void?

    How to add contact details next to responsive Google Map

    CSS: How to get rid of the extra space of first line of a paragraph?

    How to format text using CSS

    CSS how can i turn the scrolling off during the animation?

    How to position label text with css