I have an image, say 320 x 240 pixels in size, which I want to display doubled in size (i.e. 640 x 480 pixels) on a web page. In the past, I have done this by setting width=640 on the img tag.
However, I have just spotted the following in the HTML specification:
The dimension attributes are not intended to be used to stretch the image.
In that case, how do I double the size of an image on a web page without going against what the spec intends?
You can use CSS instead. The two methods that jump to mind are using the width or scale transformation.
E.g. img { width: 640px; }. This will keep the proper aspect ratio without specifying the height.
img {
width: 640px;
}
<img src="http://www.placehold.it/320x240">
E.g. img { transform: scale(2) }
img {
transform-origin: top left;
transform: scale(2);
}
<img src="http://www.placehold.it/320x240">
You can set the dimension of the parent image container
.imageContainer {
width: 640px;
height: 480px;
}
img {
width: 100%;
height: 100%
}
<div class="imageContainer">
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQqdnZQDnZOOyBGXXB23WS87IAxZ85drC-ylgrqWCqYk2aEh3Vo">
</div>
Via CSS, ideally in a style sheet, but in the style attribute if necessary.
For instance, here's your 32x32 gravatar stretched to 128x128:
.stretch-128 {
width: 128px;
height: 128px;
}
<img src="https://www.gravatar.com/avatar/6b938dc4205cd0cea4e4e68451c42a21?s=32&d=identicon&r=PG" class="stretch-128">
Naturally, any time you stretch an image like that, the quality is likely to suffer.
First I created a div with a class named divWrapper with a specific size. We then create a class for our image with a width of 100%(which spans across the divWapper), and added a height of auto(To automatically keep the height in proper proportion). You can adjust the size of the image according to the divWapper class.
.divWrapper{
width:640px;
height:480px;
float:left;
}
//Now set you image class to
.imageclass{
width:100%
height:auto;
float:left;
}
<div class="divWrapper">
<image class="imageclass" src="https://upload.wikimedia.org/wikipedia/commons/2/2d/Picea_glauca_taiga.jpg">
<div>
This will keep the image in proportion no matter what size the wrapper container is.
A Helpful Note:
You must have a high quality image from the start I suggest using vector images. I prefer to Use PNG or SVG. It has better quality than jpeg and others.
Here are a couple of link that describes a little about image extensions.
https://blog.online-convert.com/best-image-file-extensions/
https://www.sitepoint.com/gif-png-jpg-which-one-to-use/
There are at least 4 ways to do this.
1. directly set width attribute of img
principle: modify the width of the image.
set width: 640px; display: block for the img tag.
2. wrap img with a div
principle: inherit the width from parent node.
div width: 640px
img display: block; width: 100%
3. set the image as background of a div
principle: the image is no longer a img tag, but the background of a node.
div background-image: url(), use the image as background image.
div background-size: {2x width} {2x height}, to resize the size of the image
4. scale the image into 2x
set the transform property to scale(2), which means I want the size of it 2 times of its original size
tips: also, we need to set the property transform-origin into top left, in order that it can start from the position(relatively) top: 0; left: 0;
Run the snippet and have a look :)
.method-1 {
display: block;
width: 640px;
}
.method-2 {
width: 640px;
}
.method-2 img {
display: block;
width: 100%;
}
.method-3 {
width: 640px;
height: 480px;
background-image: url(http://www.placehold.it/320x240);
background-size: 640px 480px;
}
.method-4 {
transform-origin: top left;
transform: scale(2);
}
<h1>method 1: img displays as block, width 640px</h1>
<img src="http://www.placehold.it/320x240" class="method-1" />
<br/>
<h1>method 2: parent dom width 640px, img width 100%.</h1>
<div class="method-2">
<img src="http://www.placehold.it/320x240" />
</div>
<br/>
<h1>method 3: the img as div's background, use the background-size attribute to set 2x size.</h1>
<div class="method-3"></div>
<br/>
<h1>method 4: use CSS3 transform property to scale the image into 2x.</h1>
<p>tips: when we set `transform: scale(2);`, we also need to define the `transform-origin` property to `top left`, in order that the image will align from top to bottom as well as from left to right, or it will lost itself. LOL.</p>
<img src="http://www.placehold.it/320x240" class="method-4" />
Here's a list of things you want to avoid when loading an image:
FOUC - which happens when the browser does not have the image size before loading it (in which case it doesn't allocate any space for it until it's fully loaded) or telling the browser the wrong size
distortion (displaying an image at a different aspect ratio than 1:1)
pixelation (displaying an image at a significantly bigger size than its native size)
loading images with significantly bigger native size than the size in page - they slow the page down and consuming unnecessary bandwidth
There are ways to deal with each of the above.
For avoiding FOUC, there are a few methods:
have the image sizes (or ratio) saved, besides the file itself, so you can allocate the correct space in page flow, before loading the images (WP does this out of the box, for example and most themes use it to avoid FOUC)
have the image load in a container, as background image with background-size: cover, so FOUC is not possible, as the document already knows the size of the element, before the image is loaded. This technique also has the advantage of not displaying broken image anchors when an image fails to load. Also, this technique is widely used today in full screen image layouts, some of them using parallax effect. Has the disadvantage of cropping top/bottom or left/right, depending on aspect ratio difference between container and image.
load the image in a position:absolute centered container and when you have its size (and are able to calculate exact position in document flow) animate its scale from 0 to 1 while also animating its container size from "default" to proper size.
Regarding distortion, there isn't much to say, except do not do it. Any other option is better than distortion: cropping, pixelation, even FOUC. Distortion basically says: "Don't trust me with design tasks - I'm unable to tell does from donts" - which, to many, translates to: "I'm unqualified for professional frontend development. I'll mess up any website coming my way, most likely without knowing".
On pixelation. It's a tricky one: you want the page to load as fast as possible, but also want crisp images. When dealing with very large background images, a neat trick is to add a pattern over the image (stripes, dots or any other such semi-transparent patterns - an artistic touch to make pixellation a lot less noticeable).
Another good and smart technique for getting best of both worlds (speed and image quality) is to:
load a proportional thumbnail versions for every image below the fold (yes, they'll look pixelated) and display them at .65 opacity. Lazy load the full size images before they are scrolled into view. Even if the pixelated version is visible for a short while, it will be replaced by the full-size one, creating a focus-in effect, together with changing opacity to 1. If you have quality, outstanding images, you really want this effect (a) because it makes them stand out and b) because you want to load the images at proper, crisp size). The images will look "alive" and get subtle focus, leaving visitors with the impression of looking at a highly sophisticated website.
Avoid oversizing. Here src-set comes into play, combined with the thumbnail loaders described above. And, of course: lazy-loading. Always lazy load anything below the fold. It makes a big difference.
In short, that's how you correctly load images. In reality, it's a huge subject, I haven't even touched optimization, raster vs vectors, svg's or webp formats.
You can achieve this by two way as below.
<img class="xx" src="http://placehold.jp/150x150.png">
.xx {
zoom: 200%;
}
.xx {
transform: scale(2);
}
Generally I haven't found an article providing a way to scale images with client side technologies (leave it the browser's mechanism) without losing some quality.
With that being said I am afraid that If you want the best way to double your image according to HTML Standard specifications the best answer is to use a different image. A scaled up image through back-end process or through Photoshop. Now if you want adaptive image according to the user's screen since most probably this is the actual case the HTML Standard to achieve that is with the following way:
<picture>
<source srcset="http://www.placehold.it/320x240" media="(min-width: 600px)">
<source srcset="http://www.placehold.it/640x480" media="(min-width: 900px)">
<img src="http://www.placehold.it/160x120">
</picture>
Out of my experience the best way to double the size of any image for usage in websites is to actually double the image in a program like Photoshop and then upload it.
The image size, the pixel density for the retina screens, and the plethora of different screen sizes makes working with images a little more advanced than it used to be, but nothing too hard.
check the following example:
<picture>
<source
sizes="(width < 32em) contain, (width >=32em) contain 80vw calc(100vh - 10em)"
srcset="full.jpg 2048h 1024w, half.jpg 1024h, quarter.jpg 512h, eighth.jpg 256h" />
<img src="eighth.jpg" alt="rose flower!" />
</picture>
You upload a relatively big image, at least FHD, or bigger, and then with the 'sizes' and 'srcset' you configure it, which one to load depending on the screen size/type.
This way you cover any potential resolution, small or big, and you always display the best version of your image.
Ok, i admit it, there is some manual labor work to happen in every image prior the uploading, but the final result is worth it!
Now if you insist of keeping the same small image file and double it via using coding, then the best way is to add a CSS class to your image, and on that class specify your doubled dimensions, and that's it.
Here is a funny and good explanation about images srcset, sizes, and the importance of why we need to do it this way.
A fun article on srcset
You can user javascript for like this way this to change image size by it's double
Check this JsFiddle Demo
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
var img = $("#sky");
// Create dummy image to get real size
$("<img>").attr("src", $(img).attr("src")).load(function(){
var realWidth = this.width;
var realHeight = this.height;
alert("Original width=" + realWidth + ", " + "Original height=" + realHeight);
var newWidth = realWidth * 2;
var newHeight = realHeight * 2;
$("#sky").width(newWidth);
$("#sky").width(newHeight);
alert("new Image Size" + newWidth+"x"+newHeight);
});
});
});
</script>
</head>
<body>
<img src="https://www.cluedin.net/images/providers/stackoverflow.png" id="sky" width="250" alt="Cloudy Sky" contextmenu="skymenu">
<p><button type="button">Get Original Image Size And Double it</button></p>
</body>
</html>
I like most of the previous solutions, but the issue here is that we don't actually know the current image size to double it!!
So, my solution is kinda dynamic, and it won't affect other images on your website as well.
Also, it can be enhanced to triple their sizes, and more if you wanted!
Check a Live Preview here.
Or read it below:
HTML
<img class="resize-double" src="https://placeimg.com/100/50/nature">
<img src="https://placeimg.com/200/100/nature">
JavaScript
// Select all images to be resized
const toResizeImgs = document.querySelectorAll(".resize-double");
// Loop over those images and double their size
for(let i=0; i < toResizeImgs.length; i++) {
toResizeImgs[i].style.width = toResizeImgs[i].offsetWidth * 2 + "px";
toResizeImgs[i].style.height = toResizeImgs[i].offsetHeight + "px";
}
It would select the images with the class resize-double, loop on them and change their width/height to 2x of the current one!
NOTE: BothoffsetWidth and offsetHeight return the current width/height including Margins, Paddings and Borders. If it doesn't suit you, you can use clientWidth and clientHeight, or even scrollWidth and scrollHeight based on your needs!
The most optimal way is to load the biggest image to your site and downscale it where you need through CSS.
1) Best quality for your image since upscaling distorts the image.
2) No need to load more images with different sizes
3) Downscaling does not spoil the image and it is just some lines of CSS
If you don't want to load the bigger image, the second best and fastest solution is to upscale it through CSS. Width attribute no longer works in <img>
You can do that many various ways. But whatever you do, first download your image which size you want it to mean the double size otherwise if you double the size, then it gets pixelated or looks faded.
image{ transform: scale(2); }
Try transform scale to double sized your image
Try setting the width in the image with CSS
Try with JavaScript with setAttribute("width", "size")
Well you can use css and avoid stretching.
img{ width:640px; background-size: cover; height:auto;}
This will stretch your image equally with suitable height. You can also try setting height to a specific number.
The dimension attributes are not intended to be used to stretch the image.
As you already mentioned that using width attribute doesn't intend to stretch the image. so in that case we should use transform: scale(2); which is a good idea but this may also get conflict regarding image overlapping other content, so best idea is to use 2x width of div with image scaled 2x with css property 'transform: scale(2);'
Hence: using the below style should be a good idea.
.img2x_container {
width: 640px;
height: 480px;
}
.img2x_container img {
transform: scale(2);
}
This use case is only beneficial when we know the image height and width.
You can make use of transform -> scale
img#imagId {
-ms-transform: scale(2); /* IE 9 */
-webkit-transform: scale(2); /* Safari 3-8 */
transform: scale(2);
}
I use following Java Script code to scale image according which can fit best in container. You may make few changes per your need.
function scaleImage(container, image) {
var c = document.getElementById(container);
var i = document.getElementById(image);
var newSize = scaleSize(c.clientWidth, c.clientHeight, i.width, i.height);
i.style.width = newSize.width;
i.style.height = newSize.height;
c.style.backgroundColor = "transparent";
c.style.border = "none";
var intHeight = ((100-((parseFloat(i.style.height)/87)*100))/2);
var strHeightPercentage = intHeight.toString().concat("%");
c.style.top = strHeightPercentage;}
function scaleSize(maxW, maxH, currW, currH) {
var ratio = currH / currW;
if (currW >= maxW && ratio <= 1) {
currW = maxW;
currH = currW * ratio;
}
else if (currH >= maxH) {
currH = maxH;
currW = currH / ratio;
}
return { width: currW, height: currH };
}
CSS trick, setting just one property
If you want to use CSS, there's a really good way:
img#image_id {
width: calc(2 * 320px);
height: auto; /* This can be omitted */
}
This is very useful which you can change the scale of the image by changing just one number (i.e. the factor). No worries about the image height, it will be set automatically by the browser, even if you omit setting image height to auto (because auto is the default value of width and height; see this and this). Also, you can set height instead of setting width.
It would be useful for responsive design in a way, and I think it's really tricky!
Note: It doesn't work with flex-boxes, if you set the parent's width or height. In this case, you must explicitly set width and height, or there would be another tricks for that; flex-boxes works completely different.
The most complex stuffs are hidden in the simplest!
What they mean to me by this sentence is to «take care of scalability».
And for that, there is nothing better than svg. We need to think about caching. Just avoid to embed them directly. Let the client browser do the caching by using external src.
As soon as this is well done, we can scale it at moon size, keeping it smooth...
Svg can be generated server side, but it's always better to carefully create them with (gimp). Then open the svg with a text editor.
If using images, currently, for nice rendering in different screen resolution, the best should be to use a set of them in different resolution, with srcset. Finally just like other dynamics elements, let the client browser do the choice by providing him many options. Again, with caching in mind. it will download and keep only the one it need.
If an html solution exist, we should use it before trying to alter it (by js or css).
https://css-tricks.com/responsive-images-css/
A new css property is in town: image-rendering.
https://drafts.csswg.org/css-images-3/#the-image-rendering
As usual, the most complete answer are the specs!
https://drafts.csswg.org/css-images-3
I'm trying to solve an issue with css "position:fixed" property on mobile browsers. I have a fixed div:
<div id="logo">
...other content here...
</div>
with css:
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom: 100px;
right: 0px;
width: 32px;
height: 32px;
}
So, usually the behaviour is exactly the desired one, with the div position always on the bottom right of the window, indipendently of the scroll position.
My issue is that on mobile browsers, when the users zoom the page, after a certain zoom level the div position is wrong (sometimes the div disappear out of the window).
I know that fixed position is not well supported on mobile browsers, but I wonder if there is some workaround. I tried with this js code onScroll event:
window.addEventListener('scroll', function(e){
drag.style['-webkit-transform'] = 'scale(' +window.innerWidth/document.documentElement.clientWidth + ')';\\I want to avoid zoom on this element
var r = logo.getBoundingClientRect();
var w = window.innerWidth;
var h = window.innerHeight;
if(r.right != w){
rOff = r.right - w;
logo.style.right = rOff;
}
if(r.top+132 != h){\
tOff = r.top + 132 - h;
logo.style.bottom = tOff;
}
});
Unfortunately, the code seems to return the wrong position.
Does anyone have any tip?
Ok, that's how I solved the issue...I hope that could help anyone to simulate fixed position on iOS devices.
I switched the position from fixed to absolute;
Attach to window a listener to get the new position when the page is scrolled or zoomed,
setting window.onscroll and window.onresize events with the following function:
function position() {
drag.style.left = window.innerWidth + window.pageXOffset - 32 + 'px';
drag.style.top = window.innerHeight + window.pageYOffset - 132 + 'px';
}
Do you want to catch if zoom is active?
There's no window.onZoom listener, but you can read this thread:
Catch browser's "zoom" event in JavaScript
and this answer: https://stackoverflow.com/a/995967/3616853
There's no way to actively detect if there's a zoom. I found a good entry here on how you can attempt to implement it.
I’ve found two ways of detecting the zoom level. One way to detect zoom level changes relies on the fact that percentage values are not zoomed. A percentage value is relative to the viewport width, and thus unaffected by page zoom. If you insert two elements, one with a position in percentages, and one with the same position in pixels, they’ll move apart when the page is zoomed. Find the ratio between the positions of both elements and you’ve got the zoom level. See test case. http://web.archive.org/web/20080723161031/http://novemberborn.net/javascript/page-zoom-ff3
You could also do it using the tools of the above post. The problem is you're more or less making educated guesses on whether or not the page has zoomed. This will work better in some browsers than other.
There's no way to tell if the page is zoomed if they load your page while zoomed.
Just a theory, but you may want to try setting the bottom/right positions in % rather than px.
I think what you're seeing when using pixel measurements is just the zoom effecting the pixels. Or to put it better, when you zoom-in the pixels appear larger and that throws off the position of the element, even pushing it out of the view-port on smaller screens.
Example using pixel positioning
Notice that even on a desktop as you zoom-in and out the element appears to move up and down?
Example using percent positioning
In this example the element appears to stay in the bottom right corner, because it is always positioned at 10% from the bottom of the view-port.
#logo{
position: fixed;
-webkit-backface-visibility: hidden;
bottom:10%;
right: 0;
width: 32px;
height: 32px;
}
Having two different z-index for the logo and the rest of the page could help. Allowing zooming only to the rest of the page and not to the z-index layer where logo is included. So, this might not affect the stretching on the logo.
We can
Implement a ZOOM listener
Attach it to browser
Make the zoom listener change the zoom level of the element (modify the elements position) using z-index as a factor.
I'm designing a web page that has a photo for a background image of the main page.
The image must cover as much of the available window size as possible, whilst maintaining the correct aspect ratio.
To that end, I have a "container" div with the following CSS:
div.background {
background-image: url('/Content/Images/Home/main-bg.png');
background-repeat:no-repeat;
background-size:contain;
background-position:center;
float:left;
width:100%;
}
which is working perfectly.
However, I now need to position additional dom elements at specific places on the image, which are also scaled to the same as background image.
I initially thought that using JQuery and reading the "background-image-x","background-image-y", "background-image-x", "background-position-x", and "background-position-y" CSS properties might give me the information I need to position the additional elements.
However, these are not returning the needed information (for example, image-x and image-y both return "50%").
Is there some nice and simple(ish) way to achieve what I need... or am I going to have to resort to using Javascript and math to manually set the position and size of the background image (thus giving me the answers I need)?
I hate math. Please don't make me use it :)
You could work this out with some quite simple comparative ratios, of the image width vs image height compared to container width vs container height. To work out whether the image will be scaled horizontally or vertically.
img_ratio = img_width / img_height;
container_ratio = $(elm).width() / $(elm).height();
Following that you can work out the offset quite simply as you can work out by what percentage the image has been scaled. And apply that to the opposite mesasurement, and compare it to the container.
if(container_ratio > img_ratio){
//centered x height 100%
var scale_percent = $(elm).height() / img_height;
var scaled_width = img_width * scale_percent;
var x_offset = ($(elm).width() - scaled_width) / 2;
offset = [x_offset, 0];
}else{
//centered y width 100%
var scale_percent = $(elm).width() / img_width;
var scaled_height = img_height * scale_percent;
var y_offset = ($(elm).height() - scaled_height) / 2;
offset = [0, y_offset];
}
I've wrapped this up in an example fiddle at: http://jsfiddle.net/y2LE4/
I hope to help.
Try with:
$(document).ready(function(){
var something = background.offset();
}
or
$(document).ready(function(){
var something = $('.background').outerWidth(true);
}
Or just the width feature: http://api.jquery.com/width/