Html – How To Auto-resize An Image To Fit A 'div' Container - ITecNote

Trang chủ » Html Auto Resize Image To Fit Div » Html – How To Auto-resize An Image To Fit A 'div' Container - ITecNote

Có thể bạn quan tâm

Skip to content

autoresizecsshtmlimage

How do you auto-resize a large image so that it will fit into a smaller width div container whilst maintaining its width:height ratio?

Example: stackoverflow.com - when an image is inserted onto the editor panel and the image is too large to fit onto the page, the image is automatically resized.

Best Solution

Do not apply an explicit width or height to the image tag. Instead, give it:

max-width:100%; max-height:100%;

Also, height: auto; if you want to specify a width only.

Example: http://jsfiddle.net/xwrvxser/1/

img { max-width: 100%; max-height: 100%; } .portrait { height: 80px; width: 30px; } .landscape { height: 30px; width: 80px; } .square { height: 75px; width: 75px; } Portrait Div <div class="portrait"> <img src="http://i.stack.imgur.com/xkF9Q.jpg"> </div> Landscape Div <div class="landscape"> <img src="http://i.stack.imgur.com/xkF9Q.jpg"> </div> Square Div <div class="square"> <img src="http://i.stack.imgur.com/xkF9Q.jpg"> </div>

Related Solutions

Html - How to make a div not larger than its contents

The solution is to set your div to display: inline-block.

Html - Auto-size dynamic text to fill fixed size container

Thanks Attack. I wanted to use jQuery.

You pointed me in the right direction, and this is what I ended up with:

Here is a link to the plugin: https://plugins.jquery.com/textfill/ And a link to the source: http://jquery-textfill.github.io/

;(function($) { $.fn.textfill = function(options) { var fontSize = options.maxFontPixels; var ourText = $('span:visible:first', this); var maxHeight = $(this).height(); var maxWidth = $(this).width(); var textHeight; var textWidth; do { ourText.css('font-size', fontSize); textHeight = ourText.height(); textWidth = ourText.width(); fontSize = fontSize - 1; } while ((textHeight > maxHeight || textWidth > maxWidth) && fontSize > 3); return this; } })(jQuery); $(document).ready(function() { $('.jtextfill').textfill({ maxFontPixels: 36 }); });

and my html is like this

<div class='jtextfill' style='width:100px;height:50px;'> <span>My Text Here</span> </div>

This is my first jquery plugin, so it's probably not as good as it should be. Pointers are certainly welcome.

Related Question
  • Html - How to give text or an image a transparent background using CSS
  • Html - How to make a div 100% height of the browser window
  • Css - How to transition height: 0; to height: auto; using CSS
  • Css - How to vertically align an image inside a div
  • Html - CSS background image to fit width, height should auto-scale in proportion
  • Css - Font scaling based on width of container

Từ khóa » Html Auto Resize Image To Fit Div