This is a continuation of CSS Display an Image Resized and Cropped. The answer there seems to be okay for that user but I need some help to improve upon that answer...
Q: how can the resize (scale) be related to the size of the image at runtime. i.e. I don't want to hard code something like "width: 320px; height: 221px;" in the style - that works if you know the dimensions of the image up front.
Here are some jsfiddles:
http://jsfiddle.net/VdX68/ - based on the original thread answer. Works if you know the dimension of the image up front.
http://jsfiddle.net/VdX68/4/ - you don't have to know the dimension of the image, but only works for 100% scale. (here I simply removed the width, hight from the .scalePan class.
http://jsfiddle.net/VdX68/2/ - using width and hight as %. This scales the image to the size of the containng div not the image original dimensions.
I'm looking for a way to scale the image to a % of the original dimensions, not a % of the container it is in.
Any help much appreciated.
I understand you want to do this, but I'm not completely sure.
$(document).ready(function() {
var wdth = $('img').width();
var hght = $('img').height();
$('img').css('width', wdth / 100 * 90 + "px"); // new width is 90% width of image
$('img').css('height', hght / 100 * 70 + "px"); // new height 70% height of image
});
Working example: http://jsfiddle.net/VdX68/18/
You don't have to use JQuery, you can do this with regular javascript also.
Related
So, I have an art website, with each work getting its own page. The works are mostly photos, meaning they have higher resolutions than most screens are capable of displaying - so they need to be resized down to scale, obviously.
To make works easier to look through, I display them such that they take up most of the screen (minus 100px in either dimension), scaling to fill whichever dimension is more limiting:
Work X is square-shaped, and on the average monitor it gets resized so that its height fills the entire vertical space, and its width scales accordingly - preserving the aspect ratio
Work Y is tapestry-shaped, and gets resized so that its width fills the entire horizontal space, and its vertical space gets resized to match that aspect ratio.
I'm currently using a straightforward Javascript script for this, calling a function on the img tag's onload (as well as whenever the window is resized) to calculate the desired width/height of the image and apply that. The problem with using Javascript for this is that there's a delay between when the image begins to load and when it resizes, which makes the page look really ugly for a while, especially when viewing the site on a poor internet connection.
Leading to my question: is there a way to resize images to a certain percentage of screen size, while preserving aspect ratio, in pure CSS?
This answer provides another Javascript solution, but I'd prefer to find a way to do this in pure CSS if possible.
My current script is this:
function setGoodHeight (element) {
if( on mobile ) {
...
}
else {
height_buffer = 100
width_buffer = 100
height_diff_pct = element.naturalHeight / window.innerHeight
width_diff_pct = element.naturalWidth / window.innerWidth
if(height_diff_pct > width_diff_pct) {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.height = window.innerHeight - height_buffer;
element.width = w * element.height / h;
}
else {
var h = element.naturalHeight;
var w = element.naturalWidth;
element.width = window.innerWidth - width_buffer;
element.height = h * element.width / w;
}
if(element.width < 540) {
element.parentNode.setAttribute("style","width:" + 540 + "px");
}
else {
element.parentNode.setAttribute("style","width:" + (element.width + 40) + "px");
}
}
}
Using the vw and vh units in CSS allow you to size things based on the browser viewport rather than parent elements.
If you set the max-width and max-height for the image it should constrain the image to be no bigger than the browser viewport size for any browser size.
#image-id {
max-width: 80vw;
max-height: 80vh;
}
Tell your images to be at most 100% width of the container they are in, and height set to auto will maintain aspect ratio.
.my-image-class {
max-width: 100%;
height: auto;
}
How about using background-size: cover; for this?
Every image can be the background of a div, which in turn has the following properties set.
height
width
background-size: cover;
background: url('img.png') center center no-repeat;
JavaScript is the best answer but if you really want to only use css you can use percentages rather then px these will scale to a given container.
.img {
max-width:100%;
max-height:100%;
}
here is a similar question and answer: StackPost
I have set the height and width of my parent div to:
width:1060px;
height:650px;
Which gives me an appearance as far as its size in Chrome on my 720 laptop but when I plug the 1080 TV through the HDMI it's too little on the screen.
I wonder if there is a way to resize the parent div to keep the same distance I get from top/bottom/right/left for 16:9 ratio.
Yes, you need to trigger a resize on the container each time on orientation change with js, then calculate your designed width height aspect ratio, then resize your container to screen.height, then multiply your screen height * your desired aspect, then that result is your width, then check if your width is not minor than screen width, if not is good, if true make the same but in backwards, dividing screen width / desired aspect ratio. lastly center your container in the screen with js or css.
that is the idea, i know works because i ve done it, probably there will be an easy way to accomplish the same.
In this way you can build percentually inside the container and will allways look the same in any kind of stuff, the only change will be a strip on the width or height depending your aspect ratio and your device specs, but it will be allways at biggest possible way.
EDIT,
Is something like;
var ratio = 1060/650;
$(window).on('resize', function() {
$('#container')
.css({width: screen.width + 'px', height: screen.width*ratio + 'px'});
if ($('#container').height() > screen.height) {
$('#container')
.css({width: screen.height/ratio + 'px',height: screen.height+'px'});
}
$('#container').css({left: (screen.width - $('#container').width()) / 2+'px',
top: (screen.height - $('#container').height()) / 2+'px'});
});
In jsfiddle wont be nice as this is using screenwidth (you could also use innerHeight, depends if you are going full screen).
Didnt test it but thats the general idea
What you want is a responsive design. In order for your page to resize, you have to start using percentages instead of fixed widths.
For example, change your width:1060px; to width:90%;. The height can stay the same, but if you wanted it to get taller, you can set height:100% and that adjusts according to the content on the page.
Also, instead of using px for text-size, use em. em is like percentages for text.
Here is a great tutorial that helped me a lot with responsive design.
Use CSS media Queries to specify styles for different screen resolutions & sizes. Your browser will choose the respective style depending on the size of the view port.
Read more about that here -> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
I am trying to adapt the dimensions of some items on my HTML page to the size of the window. I know it can be done quite easily with JQuery with something like :
$(window).resize(function(){
var width = $(this).width();
$(item).css('height',(height * w / h)+ 'px'); // w and h are variables used to calculate the ratio
});
However I am looking for a way to do it with CSS.
I have an centered item that occupies 40% of the width of the window. So when the width of the window is reduced, the width of the item is reduced too, but the height is the same. So all I want is the ratio to be the same.
You can set the height to 0, and then add a padding-bottom: X% where X is the image's aspect ratio. You can get the ratio with SASS by using
.element{ padding-bottom: percentage(height/width); }
Also, this can be used in conjunction with a background image and using background-size:cover; to make the image responsive.
I got a problem with images and its pixels probem.well let me tell you this.I got a picture of 2448 x 3264 pixels. So its a big image I just decided to reduce its size using this way
<img src="1.jpg" style="width:600px;height:500px"/>
But there is a problem I see, the picture looses its clarity and its visibility, it looks like pulled it close and the person in the images looks so ugly.but using the original size makes look so big . I am sure there is a way to do because I see google images result and also on some websites I tried to see thier code but Could not figure it out.
Could anyone please tell me how do i make the images look good even when they got too long resolution and make them fit in the given width?
Update
Okay now i understand we need some server side image processing and could anyone tell me what would be the way to do it Thanks
The most wide-used practice is to resize the image server-side. When the image is uploaded to the server (e.g. by the user) the server takes it and creates and creates needed thumbnails.
Unfortunately this cannot be done with HTML, CSS nor JavaScript. And there are a lot of cons of forcing the size of the image with CSS. For example the user have to download the whole image ( I guess yous is about 6MB ) and it could take a lot of time .
Withour any language you cant do it, or you have to edit the image and need to upload to your host.
Try using the plain html. It will also help if you have the right width:height ratio (in this case, 3:4)
so:
<img src="1.jpg" width="375" height="500"/>
To gain better quality you need something more, then only HTML. You have to resize images manually, either use some server-side scripting to prepare images before rendering (better even do it on uploading if you sure about specific dimensions).
What you need is server side image processing. For exaple phpThumb or another implementation depending on your serwer platform.
Example:
<img src="../phpThumb.php?src=1.jpg&w=600" />
the phpThumb will open image passed in src, and resize it to width passed in w -> the process image on the fly and outputs to the browser.
For pictures to maintain their clarity, you need to ensure that you maintain aspect ratio. Aspect ratio is the width/height ratio of images and if you resize images maintaining the ratio, then their clarity is maintained. You are getting the resized image to be messed up because 2448/3264 != 600/500.
Now tag resizes by aspect ratio, if you give only one of the attributes of width or height. eg:
<img src="your_src" width=600>
This will render maintaining aspect ratio(it calculates the height needed). However, this could lead to problem sometimes if you have a max-height constraint, because the recalculated height could exceed the div height, if your div has a max-height.
If you have a max-height and max-width constraint, you can use the following code to resize the image using JS. I am assuming that max-width and max-height values as 600px and 500px respectively and you can change as per your needs:
height = this.clientHeight;
width = this.clientWidth;
aspectRatio = width / height;
if (height > width)
{
height = 500;
width = height * aspectRatio;
}
else if (width > height)
{
width = 600;
height = width / aspectRatio;
}
this.setAttribute("height", height+"px");
this.setAttribute("width", width+"px");
I want to insert an image in a webpage and I want it to fit in a 120*40 space.
The problem is, original images can have about any size (400*40, 30*220, etc.)
so if I set height attribute to 40, I might find myself with images larger than 120 width. The same goes if I set a 120px width.
If I set both width to 120 and height to 40, well it fits, but the original ratio is lost, and I don't want that.
What would you suggest ?
Get the original properties of the image in javascript and then set one of them (either to 120 width or 40 height) so that the other fits in 120*40 ?
There are a lot images like that in one page so I think this method is a bit heavy...
PHP solution :
<?php
list($width, $height, $type, $attr) = getimagesize($image);
if($width/$height>3)
$height *= 120/$width;
else
$height = 40;
?>
<img src="<?=$image?>" height=<?=$height?>>
see below for a javascript solution and a CSS solution
css properties max-width and max-height are what you need.
My guess is that it will resize itself if it reaches one of these.
I have used this alot in previous web projects.
But i havent used the combination of both yet.
EDIT: I've sais this in a comment, but setting both those properties does work in my tests. It keeps the ratio and resizes by the limit it reaches first. Do not set any width or height properties, these might cause problems
JavaScript is quite fast, so why not try it?
I'd just stick to finding the aspect ratio and adding some checks:
var width = image.width;
var height = image.height;
var ratio = width / height;
if (width > 120) {
width = 120;
height = 120 * ratio;
} else if (height > 80) {
height = 80;
width = 80 * ratio;
}
image.width = width + 'px';
image.height = height + 'px';
As you seem to be using PHP, ImageMagick can resize an image to fit inside of a predefined box. I only know how to do it via CLI, as I don't use PHP, but I bet the PHP code would be simple.
I was actually searching for an answer to a different query but came across yours.
I use this to resize images which I am finding is very handy in a number of my scripts, but what I would suggest is that you resize the image to a little bigger than the longest side of the container and then use css to center the image both horizontally and vertically and set the container with overflow:hidden;
You lose a small bit of the image around the edges but at least they are all inserted without any stretching or squashing.
Hope that helps you or anyone else trying something similar.