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%;}
Related
As I read, embedding an svg in another SVG leads to create another document and therefore complexify a lot the styling of those svg ...
Is there a way to use the css property transform : rotate(90Deg) easily on only 1 of the embbed svg ?
I'm trying to rotate the background only and not the front svg which needs to stay vertically ...
This example will help you a lot to understand what I'm trying :
https://codesandbox.io/s/example-rotate-svg-mucs3
Edit
Its seems that it works on Firefox but not in Chrome ... Does anyone know a solution for this in Chrome ?
Chrome's overview:
Firefox (and wanted) overview:
I've submitted this problem. Its has been merged here
As a work-around while waiting for this "bug" to be corrected. ( Should take some time as it's been reported since 2013... )
I've added a transform porperty with rotate(90) translate(0, -600) directly ON the <g> inside of the "background.svg".
The translate thing is here beacause the center used for rotating is by default [0,0]. It's clearly explained HERE
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".
So basically I am loading a svg in img tag as a loader. Image is coming up and displaying but it's not animating. If I put it in index.html it's working as expected. I expect as it is JSX something I am missing don't know what. Any lead is appreciated.
If SVG image is loaded into an <img> tag, it will render as a static image, and its internals will not be accessible to page's javascript, and page's style definitions will not affect it.
The only way it can be animated is if the SVG itself defines its animation (aka SMIL animation). However, the support for animated SVGs is patchy (IE, Edge, Firefox, Chrome (considered for deprecation)).
If you want to dynamically affect your SVGs, embed them into the page directly, as <SVG> tags.
Is your animated SVG self contained? By that I mean is it using internal SMIL or CSS animation?
If so, then embedding it using <object> should work. It will not animate if you embed it using <img>.
As correctly presented by e-neko in one of the answers of the current question, img tag is rendered as static element. Because of that, this is how I managed to make an animated SVG be correctly rendered:
public render(): ReactElement {
const { icon } = this.props;
return (
<svg>
<image xlinkHref={icon}></image>
</svg>
);
}
The icon is passed as props and imported in the parent component like this:
import LoadingLogo from './assets/images/loading.svg';
I didn't manage to find any official documentation regarding this subject and this worked for me using latest React Version (16.12.0) available when posting this answer.
Cheers
I have a responsive wordpress theme and have designed an image with a image mapped active area which when clicks reveals a content div.
When re-sizing window the active area moves (of course) as the image size and position is different. I have tried a plugin http://wordpress.org/extend/plugins/responsive-image-maps/ but this doesn't seem to work unless I am failing to interpret what I am supposed to do.
Below is the html and javascript call
<map name="circle"><area shape="circle" coords="58,290,53" href="javascript:unhide('welcome');"><div class="columns different sidebar right"><img class="scale-with-grid" src="../different.png" usemap="circle" /></div></a>
</map>
Any ideas where I should be putting the coords for the different media sizes? In the CSS, witihin the html calling the #media function?
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.