I am building a new website, and want to use the srcset to let the browser deside what image is the best for the current viewport.
What happens is that what ever i put in the srcset the browser will just show the alt tag text "test". If i through F12 developer tools removes the srcset attribute completely, the image shows up just fine.
All images in my example exists and shows up in a browser:
Here is my image tag, can any one see what is wrong with that?
<img src="http://localhost/Medium/Alaska-2-1818.jpg" srcset="http://localhost/Large/Alaska-2-1818.jpg 500w, http://localhost/XXLarge/Alaska-2-1818.jpg 1000w" alt="test">
My problem is shown in this codepen i made:
https://codepen.io/AxelAndersen/project/editor/DxKeaV
In your Codepen, some URLs have an error, missing one "i".
Related
I'm using CK editor plugin for strapi. The markdown module is desactivated so ck editor returns html. On the frontend i'm using react (next.js) . Everything seems to be working fine, but the resizing is not working. When I resize an image I get a <figure> tag with a inline size of the width of the resized image and classes image image_resized, however the <img> tag inside <figure> has an attribute of sizes='100vw'. the image is bleeding out of the <figure> tag and is never actually resized even though I can see the correct width is passed to <figure>
I checked the documentation but couldn't find anything , did I miss something ? Am I to do something on my frontend so the images resize correctly ?
You can just do at global styles:
img{width:100%;}
or
figure img{width: 100%;}
I use this directive to view pdfs:
PDF Viewer
and it really works fine. The only thing I would need is also to select text in PDF. Is there a possibiliy to do this or is it not doable?
Actually I am not sure if I am right but is it an image or is it the real pdf which is shown?
It is not possible to do this. If you inspect the HTML you will see the PDF is rendered in a canvas element. So it is an image that is shown rather than an actual PDF.
I am trying to link an image within an article to another article but when clicked all I get is a larger version of the image opening top of page. Tried amending html img src, used JCE editor to create links, created a hidden menu item and copied syntax, all to no avail. Any ideas please?
Thanks
I think what you are trying to do is this:
<img src="http://placehold.it/350x150">
Just wrap your image in an anchor tag with it pointing to the site you want to go to.
I have a question about IE7 and how it ”interprets” title and alt HTML tags.
I’ve this constalation on a site:
<a title="My Name" alt=" My Name " class="profile_image" href="/members/my-ane">
<img rc="/uploads/sfguarduserprofile/229/11066_60x60_3f9ee652879b2e3209698830c9ff1583.jpeg" alt="11066_60x60_3f9ee652879b2e3209698830c9ff1583">
</a>
Now, when hover with my cursor in IE 8+, Firefox, Chrome, Safari, you-name-it it shows “My Name” in the alt-box.
But when heading over to IE7, it shows: 11066_60x60_3f9ee652879b2e3209698830c9ff1583 which would be the image alt tag.
I have the possibility to change the alt text on the image but if there is any solution other than that, I would very much appreciate it so I don’t use too much time on a relatively small problem in a single browser.
And are there any explanation why IE7 can’t figure this out oppose to its bigger brothers, IE8, 9+ ??
Sincere
- Mestika
Technically, the alt attribute should serve as alternative content in case the image doesn't load. In your case, there is no contextual need for an alt tag, as a user that cannot view the profile image does not need to see the image to understand the rest of the content.
The image should have an empty alt attribute per the WHATWG.
I am trying to use lightbox2 to display a block of text after clicking a heading element:
something like
<h3>name</h3>
I have used lightbox for images with captions but this time I would like the caption to come up without an associated image after clicking a name on a webpage.
Thanks for any replies.
I don't think that lightbox2 is made for such a thing, why don't you try http://fancybox.net/ this one works 100%.