I found many examples where to have width 100% and altering the height to have the aspect to be 16:9, but i'd like to have the div to fill the height and the width to be altered, centered.
Example for height:
Maintain the aspect ratio of a div with CSS
It will create an aspect 16:9 css only, that would be the best.
Did it with jquery, here is my solution.
HTML
<div id="aspect" style="margin:auto; width:100%; height:100%;"></div>
JQUERY
function setAspect(aspect) {
var div = $("#aspect");
div.css("height","100%").css("width","100%");
var height = div.outerHeight(false);
var width = div.outerWidth(false);
var fullaspect = width / height;
if (aspect > fullaspect) {
//adjust height
div.css("height", width / aspect);
} else {
//adjust width
div.css("width", height * aspect);
}
}
setAspect(16/9);
//setAspect(4/3);
//setAspect(1);
Have a nice day.
Related
In this example:
Fiddle Example
I have a Picture with dimensions 835x470, That image is added to 2 elements, A hidden <img> and as a background to a <div> width class wrapper, I set the <div> dimensions to smaller dimensions 519x220 on my screen.
There is a centered circular element on the <div> with the dimensions 100x100, I want to set these dimensions with the same ratio the image changed from 835x470 to 519x220.
So for example if the circle on the original image 835x470 was 200x200, When the <div> dimensions are set/changed to 519x220, The circle would take the same space it took on the original image, Which were 200x200.
So if the 200x200 represented 15% for example from the 835x470, Then the circle would take the same 15% from the new dimensions 519x220
What I tried to do is that I get the natural dimensions of the image 835x470 and get the new dimension of the image 519x220 and divide each dimension to get a ratio, Then check to get the smallest ratio (Not to make the circle be out of the image), Then multiply this ratio by 200 and set it as width and height of the image.
Here is the code:
//Get natural dimensions from the hidden image.
var imgNaturalHeight = document.getElementById('img').naturalHeight,
imgNaturalWidth = document.getElementById('img').naturalWidth,
//Get new dimensions from the wrapper that has the image as a background.
imgNewHeight = document.querySelector('.wrapper').height,
imgNewWidth = document.querySelector('.wrapper').width,
//Get height and width ratios.
widthRatio = imgNewWidth / imgNaturalWidth,
heightRatio = imgNewHeight / imgNaturalHeight,
//Define ratio variable.
ratio;
//Set ratio to the smallest ratio.
if ( widthRatio < heightRatio ) {
ratio = widthRatio;
}else{
ratio = heightRatio;
}
//The new value for width and height
var fixed = ratio * 200;
//Set the new width and height of the circle.
document.querySelector('.overlay').style.width = fixed;
document.querySelector('.overlay').style.height = fixed;
.wrapper{
position: relative;
background: url('https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg');
height:220px;
background-repeat: no-repeat;
background-size: 100%;
}
.overlay{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: rgba(0,0,0,0.4);
border-radius: 50%;
width: 100px;
height: 100px;
}
.image{
display:none;
}
<div class="wrapper">
<div class="overlay"></div>
</div>
<img id="img" class="image" src="https://raw.githubusercontent.com/fengyuanchen/cropperjs/master/docs/images/picture.jpg" >
I hope I made it clear.
So that it takes the same space it took on the original image, Which were 200x200.
Try to follow this steps:
calculate ratio of new to old image with and height
multiply original circle dimensions by its ratio
This should do the trick.
There is some example (maybe not exactly your case but I hope you can adapt it easily).
Example
Note: Im not so sure what you try to achieve in pure JS so I used clientHeight property, you can read about other possibilities here Height and width in JS
//Get natural dimensions from the hidden image.
var imgNaturalHeight = document.getElementById('img').naturalHeight,
imgNaturalWidth = document.getElementById('img').naturalWidth,
//Get new dimensions from the wrapper that has the image as a background.
imgNewHeight = document.querySelector('.wrapper').clientHeight,
imgNewWidth = document.querySelector('.wrapper').clientWidth,
//Get height and width ratios.
widthRatio = imgNewWidth / imgNaturalWidth,
heightRatio = imgNewHeight / imgNaturalHeight,
//Define ratio variable.
ratio;
//Set ratio to the smallest ratio.
if ( widthRatio < heightRatio ) {
ratio = widthRatio;
}else{
ratio = heightRatio;
}
//The new value for width and height
var fixed = ratio * 200;
//Set the new width and height of the circle.
document.querySelector('.overlay').style.width = fixed + "px";
document.querySelector('.overlay').style.height = fixed + "px"
I am writing a simple game in javascript which draws on a HTML canvas. The canvas has a fixed size (1280 × 720) and that is also the "room" in which the objects are drawn.
Now I want the canvas to be stretched to be 100 % of the screen. I can't do that by just setting the width and height of the canvas because the javascript would only draw in the 1280 × 720 rectangle in the top left.
What I want instead is, that it is zoomed in so that it takes up the whole screen and if the javascript draws something at (1280, 720) it should be the bottom right corner.
Can I do this without using any external libraries?
If you wish to keep the rendering size at 1280x720 for the canvas, but stretch or expand it to the window size you can use the css width and height for that.
Using css will only cause the shape of the canvas to change, but the internal pixels/drawing frame are still set by the width and height attribute. (This will of course cause the image to be blurry if it is upscale to much)
With CSS:
* { margin: 0; padding: 0;}
body, html { height:100%; }
#canvasID {
position:absolute;
height:100%;
/*width:100%; /* uncomment if you don't care about aspect ratio*/
}
<canvas id="canvasID" width=128 height=72>
With a script:
$(document).ready(function() {
function resizeCanvas() {
var canvas = $("#canvasID");
// original width/height from the canvas attribute
var heightOriginal = canvas[0].height;
var widthOriginal = canvas[0].width;
// fill to window height while maintaining aspect ratio
var heightNew = window.innerHeight;
// replace with window.innerWidth if you don't care about aspect ratio
var widthNew = heightNew / heightOriginal * widthOriginal;
canvas.css("height", heightNew + "px");
canvas.css("width", widthNew + "px");
}
// keep size when window changes size
$(window).resize(resizeCanvas);
// initial resize of canvas on page load
resizeCanvas();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvasID" width=128 height=72>
Alternately if you wish for the internal canvas resolution/size to be able to change dynamically you can use scale to ensure that everything gets rendered to the right size.
$(document).ready(function() {
var canvas = $("#canvasID");
// original width/height from the canvas attribute
var heightOriginal = canvas[0].height;
var widthOriginal = canvas[0].width;
// current scale (original 1 to 1)
var verticalRatio = 1;
var horizontalRatio = 1;
// the canvas context
var ctx = canvas[0].getContext('2d');
function setScale() {
// remove previous scale
ctx.scale(1/horizontalRatio, 1/verticalRatio);
// fill to window height while maintaining aspect ratio
var heightNew = window.innerHeight;
// not needed if you don't care about aspect ratio
var widthNew = heightNew / heightOriginal * widthOriginal;
// these would be the same if maintaining aspect ratio
verticalRatio = heightNew / heightOriginal;
horizontalRatio = widthNew / widthOriginal;
// update drawing scale
ctx.scale(horizontalRatio, verticalRatio);
// update width and height of canvas
canvas[0].height = heightNew;
canvas[0].width = widthNew;
}
// keep size when window changes size
$(window).resize(setScale);
// initial resize of canvas on page load
setScale();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvasID" width=128 height=72>
The below given code resizes an image to 160x160 and works fine for Firefox & Chrome but not for Internet Explorer. Why?
$(document).ready(function() {
$('#imagePreview img').each(function() {
$('#imagePreview img').each(function() {
var maxWidth = 160; // Max width for the image
var maxHeight = 160; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if(width > maxWidth){
ratio = maxWidth / width;
$(this).css("width", maxWidth); // Set new width
$(this).css("height", height * ratio); // Scale height based on ratio
height = height * ratio; // Reset height to match scaled image
width = width * ratio; // Reset width to match scaled image
}
// Check if current height is larger than max
if(height > maxHeight){
ratio = maxHeight / height;
$(this).css("height", maxHeight); // Set new height
$(this).css("width", width * ratio); // Scale width based on ratio
width = width * ratio; // Reset width to match scaled image
}
});
});
});
You're not waiting for the images to be loaded, so they're not guaranteed to have a size (depending on whether they're cached).
You should replace
$(document).ready(function() {
with
$(document).load(function() {
This being said, it looks like you could replace the whole with this style :
#imagePreview img {
max-width: 160px;
max-height: 160px;
}
(see demonstration)
html:
<div id="thumbnail">
<img src="xxx">
</div>
css:
div.thumbnail
{
border: 2px solid #ccc;
width: 50px;
height: 50px;
overflow: hidden;
}
Say the image size is greater than 50x50, is there any way that I can proportionally scale down the image so that the shorter of its width and height would become 50px? Note that the image can be in either portrait or landscape.
First load up the image in javascript to get its real dimensions.
var img = new Image('image.jpg');
var width = img.width;
var height = img.height;
Then determine which one has the larger height, and adjust them accordingly using the ratios.
if (width <= height) {
var ratio = width/height;
var newWidth = 50;
var newHeight = 50 * ratio;
} else {
var ratio = height/width;
var newWidth = 50 * ratio;
var newHeight = 50;
}
Then insert the image into the DOM using jQuery.
$('#imageContainer').append('<img src="' + img.src + '" style="width:' + newWidth + 'px; height:' + newHeight + 'px;" />');
Divide the width of the image by the height, that's your ratio. Then find what's the largest dimension, if it's the width, set the width = 50 * ratio, and height = 50; if it's the height set it height = 50 / ratio and the width = 50. Do you need Javascript code?
You can't constrain an image to a fixed width and height rectangle, while maintaining aspect ratio, in CSS alone. If you need to do this, it will be either a JavaScript or server side solution.
If you set just a width, then the height will be set to maintain the aspect ratio, likewise just a height, but this will not force the image to fit into a box since you can't know which is greatest, the width or the height.
Check out ImageMagick if you'd like something server side, otherwise, consider jQuery for a client side solution. JQuery provides a simple API to let you get the dimensions of any element, which you can then scale programatically. Newer version of ImageMagick also provide simple calls which will allow you to fit an image into a rectangle.
I am planning to use a big banner image in my website(976X450).Now in higher resolution monitors the image should stretch to occupy the space. Is there any way to do this with out using different images for different resolution?
Just start with the detection of screen dimensions and continue from there:
var width = screen.width;
var height = screen.height;
var img = document.getElementById(image_id);
img.height = img.height * width / img.width;
img.width = width;
Update:
Use CSS:
img#in_question { width: 100% }
#HeaderImage {
height: 20%;
width: 100%;
background-repeat:repeat-x;
}