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.
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>
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);
}
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>
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();
});
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;
}
