While trying to use different size images in same img tag, only the first image is picked up. The remaining images are not picked up on different display size device.
Here is the code that I am trying with.
<html>
<body>
<img src="image_1.jpg" sourceset="image_2.jpg 2x, image_3.jpg 6.5x" alt="Image">
</body>
</html>
Syntax error.
Change attribute name sourceset to srcset.
It seems you misspelled srcset. Try as follows:
<html>
<body>
<img src="image_1.jpg" srcset="image_2.jpg 2x, image_3.jpg 6.5x" alt="Image">
</body>
</html>
Related
I am trying to make the pink flowers fill the width of the viewport at 100%. However, the sizes property is not working to accomplish this. How can I correct this?
<h1>The picture element</h1>
<p>Resize the browser window to load different images. w</p>
<picture>
<source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" sizes="100vw">
<source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg">
<img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
"sizes"
Is a list of source sizes that describes the final rendered width of the image represented by the source. Each source size consists of a comma-separated list of media condition-length pairs. This information is used by the browser to determine, before laying the page out, which image defined in srcset to use. Please note that sizes will have its effect only if width dimension descriptors are provided with srcset instead of pixel ratio values (200w instead of 2x for example).
The sizes attribute has an effect only when the element is the direct child of a element.
You can make it work using the attribute <... style="width: 100vw;">.
I added a working example, didn't knew which of the 3 flowers you wanted to make big so I added it to all of them.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images. w</p>
<picture>
<source media="(min-width:650px)" srcset="https://www.w3schools.com/tags/img_pink_flowers.jpg" style="width: 100vw;">
<source media="(min-width:465px)" srcset="https://www.w3schools.com/tags/img_white_flower.jpg" style="width: 100vw;">
<img src="https://www.w3schools.com/tags/img_orange_flowers.jpg" alt="Flowers" style="width: 100vw;">
</picture>
</body>
</html>
I draw the source of img tag from database using this code in my homepage.aspx file:
<asp:Image ID="Image4" runat="server" src='<%#Eval("coverBig")%>'>
and it works perfectly, But now I wanna use srcset html tag that uses two or more image addresses and the default form looks like this:
<asp:Image ID="Image1" runat="server" srcset="images/1.png 1000w, images/2.png 660w, images/3.png 296w"/>
I want to get img source from database using eval, here's the code that I tried out but doesn't seem to be working:
<asp:Image ID="Image4" runat="server" srcset='<%#Eval("coverBig")%> 130w,<%#Eval("coverSmall")%> 90w'/>
please give me the correct code form.
THANKS IN ADVANCE
First, <asp:Image> has a valid attribute of ImageUrl and not src.
Second, src and srcset are attributes of <img> and <picture> tags respectively and are not asp.net elements.
Below code shows how srcset works -
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width: 650px)" srcset="https://images.pexels.com/photos/531739/pexels-photo-531739.jpeg?auto=compress&cs=tinysrgb&h=350">
<source media="(min-width: 465px)" srcset="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQjAWwspwgOqrtvbqz-THLRhmQ4TxBVg_9ZpqwZFb0NWJCjpqqA">
<img src="https://cdn.pixabay.com/photo/2015/04/19/08/33/flower-729512__340.jpg" alt="Flowers" style="width:auto;">
</picture>
<p>Resize the browser to see different versions of the picture loading at different viewport sizes.
The browser looks for the first source element where the media query matches the user's current viewport width,
and fetches the image specified in the srcset attribute.</p>
<p>The img element is required as the last child tag of the picture declaration block.
The img element is used to provide backward compatibility for browsers that do not support the picture element, or if none of the source tags matched.
</p>
<p><strong>Note:</strong> The picture element is not supported in IE12 and earlier or Safari 9.0 and earlier.</p>
</body>
</html>
is there a way to change my queue order for images?
I have an image which i use as a "blur" preview for an bigger image. I use a cms so there are a lot of images which load before my image. Even preload is ignored.
The order is:
Body with background image
27 images
Custom preview image
What I try is to change my queue order
Body
custom Preview image
27 images
My image is a low resolution image. It is 85x53 and its size is about 2,13kb.
And it start at 1,4s (Sometimes even later).
Thanks for any help :)
Kind regards,
Rakowu
You can try to use a hidden <img> tag at the top of your body to force the browser to load it earlier
Something like this:
<!DOCTYPE html>
<html>
<head>
<!-- ... -->
</head>
<body>
<img src="your/preloaded/image.png" style="display: none;"/>
<!-- ... -->
</body>
</html>
I am trying do to a simple HTML page but for some reason some images didn't appear although the src was correct. In order to discover the origin of the problem I tried to insert the images on the body of the HTML document (outside of divs and without the javascript functions I was using to manipulate the images). They also didn't appear! The src is correct and the images are displayed if I open them in the browser (if I type the address of the image in the url bar).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<!-- This image appears -->
<img src="images/header.jpg" style="width:100%">
<!-- This image don't -->
<img src="images/img_1.jpg" alt="tigre" style="width:100%">
</body>
</html>
I can't understand the origin of the problem. I tryed to open the images in a editor and save both of them to see if was a problem of encoding or something like that but the problem persisted, the imagens that appeared before continued to appear and the others continued to not show up.
EDIT: If i resized the second image to the same size of the first and save it on a new file it starts to appear although blurry (due to the resizing):
image 1: 1024 x 300
image 2: 850 x 315
The page is just local (I'm not using server programs) and I am using Edge.
Thank you in advance:
works and looks ok,
https://jsfiddle.net/hts3wdjx/
<!-- This image appears -->
<img src="http://placehold.it/350x150" style="width:100%;" />
<!-- This image don't -->
<img src="http://placehold.it/350x150" alt="tigre" style="width:100%;"/>
you problem is images/
<body>
<!-- This image appears -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" style="width:100%;" />
<!-- This image don't -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" alt="tigre" style="width:100%;" />
</body>
which is ideal place to place image in NEtbeans for HTML
enter code here
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Android Stuff</title>
</head>
<body>
<img src="WEB-INF/SC20111215-165000 (1).png" width="240" height="400" alt="SC20111215- 165000 (1)"/>
</body>
< /html>
<img alt="" src="img/header960.png" align="center" >
Copy the image in the folder where the html file is present.
And change the html code to :
<img src="SC20111215-165000 (1).png" width="240" height="400"/>
Normally this kind of issues occurs when
Path given is wrong
Name of image is wrong
Extension of image file is wrong
Check the above possibilities. If these 3 are correctly given,
then try with another image with simple name in same folder where the html file is present.
Try changing the name of the image and also its path if possible... Because in most cases these things makes trouble...
<img src="newimagenamewithoutspace.png" width="240" height="400" alt="newimagenamewithoutspace"/>
And if the image has been posted by a use from front end then try to change the image name in your backend code..
This should help you..
Vote up or accept if it works
<img src="test.png" width="240" height="400" alt="test">
see more Attribute in http://www.w3schools.com/tags/tag_img.asp