CODEWITHSUNDEEP
htmlinternet-explorer
peterchen
peterchen

Reputation: 41136

HTML/IE: stretch image to fit, preserve aspect ratio

In an HTML window, I am setting a custom body 

<img src="file://[filename]">

to display an image.

Now I want to strectch the image to fit the available window, but preserve aspect ratio. 

<img src="file://[filename]" width="100%" height="100">

stretches but also distorts the image.

Is there some HTML trickery to do that? IE only solution is fine, since this is in a hosted broweser control.

Upvotes: 6

Views: 32081

Answers (7)

Tayou
Tayou

Reputation: 45

this version of @hfarazm code makes a div in wich the pic is on full vert size centered horizontally, if you make it full size horizontally it would be vertically centered, I think its the best way without using js (with tommybananas code it may be possible to make it completely work) or php or something else: HTML

<div class="centeredImage">
    <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg">
</div>

CSS

.centeredImage {
    height: 500px;
    width: 500px;
    background: rgba(0,0,0,0.0);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.centeredImage img {
    margin: auto;
    width: 500px;
}

http://jsfiddle.net/5p0ugfLw/

Upvotes: 2

tommybananas
tommybananas

Reputation: 5736

Setting width = 100% isn't exactly a great answer because it doesn't account for height and could overflow the element in the Y direction off the window.

This solution resizes the element once on load and also on resize, checking the aspect ratio of the window and determining if height should be 100% or width should be 100%. This will always keep the FULL element in the window and maximized while preserving aspect ratio.

function changeElementSize(){
    // Compare your element's aspect ratio with window's aspect ratio
    // My element was 100w x 80h so mine was 1.25
    if (window.innerWidth/window.innerHeight > 1.25){
        $('#element').css('height','100%');
        $('#element').css('width','auto');
    } else {
        $('#element').css('width','100%');
        $('#element').css('height','auto');
    }
}

$( window ).resize(function() {
    changeElementSize();
});

$( window ).load(function() {
    changeElementSize();
});

Upvotes: 2

hfarazm
hfarazm

Reputation: 1417

pure HTML solution: this is my technique.

 .iCon {
    height: 267px;
    width: 520px;
    background-color: #0F3;
    overflow: hidden;
    }
.iCon img {
    margin-right: auto;
    margin-left: auto;
    height: 350px;
    text-align: center;
    display: table-cell;
    margin-top: -50px;
    }

HTML:

<div class="iCon">
   <img src="http://media.caranddriver.com/images/13q2/510832/2014-ford-fiesta-16l-sedan-hatchback-first-drive-review-car-and-driver-photo-523592-s-450x274-1.jpg">
</div>

DEMO: http://jsfiddle.net/PBbcF/

Upvotes: 2

Philippe
Philippe

Reputation: 1823

If you want to preserve aspect ratio, you only need to specify one dimension ie:

<img src="file://[filename]" width="100%" alt="" />

You can use javascript to determine max dimension and resize accordingly

<script type="text/javascript">
function getImgSize(id){
var pic = document.getElementById(id);
var h = pic.offsetHeight;
var w = pic.offsetWidth;
alert ('The image size is '+w+'*'+h);
}
</script>

Upvotes: 13

tgecho
tgecho

Reputation: 434

If you know either the height or width, you can set only that. The other dimension will be automatically set based on the aspect ratio of the image.

Upvotes: 5

gargantuan
gargantuan

Reputation: 8954

Nope, you're going to have to use Javascript for this, and it's trickier than it sounds. I did something similar the other week, here;s the function I created for it, you might be able to re-appropriate it

Oh, and it needs jQuery

function resize_background(){

    var target = $("#background_image");
    var window = $(window);
    var ratio = 1;
    var anchor_point = 200;
    var register_point = 400;

    if(window.width() > min_width){
        ratio = window.width() / min_width;
        target.css("marginLeft", 0);
    }else{
        // center to screen
        // For this project, this aint needed.
        //var left_margin = (window.width() / 2) - (min_width / 2);
        //target.css("marginLeft", left_margin);
    }

    // now figure out anchor stuff
    var top = ((register_point * ratio) - anchor_point) * -1;

    target.width(min_width * ratio);
    target.height(min_height * ratio);
    target.css("marginTop", top);

    $("#trace").text(top);


}

Upvotes: 2

&#211;lafur Waage
&#211;lafur Waage

Reputation: 70031

Pure HTML no.

This could be done in JavaScript if you know the aspect ratio of the image. Don't know if that is possible via JS though, but you could pass that value to the JavaScript if you are using any other language as well.

Upvotes: 0

Related Questions