I'm using ghost theme and and I am facing an issue when uploading images,
when I upload any image its taking original image size and then the image is stretching in smaller resolutions. is there any option to make 100% width height for the image when uploading the image or any other solution to stop image from stretching. ?
<img src="--1--3.png" class="kg-image medium-zoom-image" alt="" width="900" height="462" />
Related
I am new to salesforce development. I want to display an image in LWC in salesforce. I added the image in static resource and add the line in lightning component
<img src="{Resource.Img1}" />
The image is showing in the LWC but when I add width and height to the image it disappears. How can I add width and height and how I can add css in LWC.
You can add inline css as below and update the height and width of your image according to your requirement.
I want to set a responsive image in my webpage using tailwind css. I have provided sufficient classes to make it work on different screen sizes. Now I am getting the following error in page-speed.
How can I eliminate the warning?
Try to use Tailwind aspect ratio.
It work fine
You can eliminate this warning by adding width and height to your images like this:
<img loading="lazy" src="assets/image/brainstorm/svg" alt="brainstorm" width="400" height="200" class="w-5/6 mx-auto" />
Basically adding width and height directly to html img tag prevents layout shifts, even if img is not loaded yet. It's especially important when img is lazy-loaded. More info here
Just adding height and width attributes and classes won't work, you have to crop the images as well to its exact dimension. For example if you have set 100px height and width, the image height and width should also be 100px.
Background
This warning exists to prevent layout shift when images load. Currently, the images have the classes w-5/6 mx-auto. This is enough to make the images responsive, but before the images are loaded, the browser doesn't know how tall the image is. Hence, when the image loads, there will be layout shift.
You then need to tell the browser how wide and tall the image should be before it loads. There a few ways of doing this.
With known dimensions
If you know the height of the image, I'd recommend following fromaline's answer.
<img src='assets/image/brainstorm.svg' alt='nature' class='w-5/6 mx-auto border' width='300' height='300' />
Because we've defined the display width with w-5/6, the image will be responsive. The width='300' and height='300' properties are then used for the aspect ratio.
Here's a link from the Tailwind playground to show you how it's both responsive and removes layout shift: https://play.tailwindcss.com/rjz9ylFNl5?size=482x720
With unknown dimensions
If you don't know the width and height of your images and you need them to be responsive, you need to essentially create a container with a fixed aspect ratio. I'd recommend looking at the aspect ratio plugin.
<div class='w-5/6 aspect-w-16 aspect-h-9 mx-auto'>
<img src='assets/image/brainstorm.svg' alt='nature' class='object-cover w-full h-full' />
</div>
Again, a link to a Tailwind Playground demo: https://play.tailwindcss.com/2zmPJixbrO?size=584x720
Is there a way to prevent the resizing of images in the <img> tag when a user is adjusting the site font size?
I have a container with a fixed height and when the text is enlarged on the site, it is pushing images outside of that container.
Edit:
Here is an abridged version of the code:
https://jsfiddle.net/0wk5bg17/
i have several svg's included in and image tag on my homepage.
My svg's are resized to the parent div container, which is 30em's wide.
My problem now is that i have svg's are not of the same width and all of them are scaled to a width of 30em.
See this example:
jsfiddle.net/xpgz44oL/
The displayed font-size should be the same for every svg.
How can i achieve this?
Assuming the original drawings were done at the same scale, you could look at the viewBox widths and set each image to that width (or a multiple of that width if you want them bigger).
<div>
<img src="http://www.austrokamin.at/media/dw/zeichnungen/laengenelement-1000mm-dw-zeichnung.svg" width="158.95px"/>
<img src="http://www.austrokamin.at/media/dw/zeichnungen/dachdurchfuehrung-20-35-grad-dw-zeichnung.svg" width="239.19"/>
</div>
I am creating a website I am using carousel bootstrap, the website is mobile friendly, however the only problem I have got is that the slider images do not shrink with the image, so it ends up making them look stretched out. I have tried max-width and max-height 100% but it does not work any advise?
If you resize your browser you will get what I mean, the header height does not shrink.
This is an example of the index page:
http://pastebin.ca/2648252
This is my css
http://pastebin.ca/2648251
Code was too long to post here, Can be seen on there no download required.
Thanks.
Try adding the img-responsive class to the carousel images..
<img src="/images/logo-1.jpg" class="img-responsive">
http://www.bootply.com/117666