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>
Related
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
I have some images displayed in a grid. However they are different heights.
How would I get them to be the same size each?
Code so far.
p.s I'm using React hence className. It works exactly the same as class.
<ul className='grid gap-4 grid-cols-1 md:grid-cols-2 pb-10'>
<li>
<img
className='min-h-full object-cover'
height='800'
width='800'
loading='lazy'
src={project.coverImage}
alt={project.title}
/>
</li>
<li>
<img
className='min-h-full object-cover'
height='800'
width='800'
loading='lazy'
src={project.coverImage}
alt={project.title}
/>
</li>
</ul>
I don't know the react syntax exactly but the height and width attributes in html needs to add px after the size number, but if there is no need for that in react so make sure there's not any styles overriding the height and width attributes.
If there's not you can add a class to the images and set through css the height as you want adding px after the number.
There is another attribute called object-fit with two values. The first one is cover which forces the image to cover the block and the second one is contain which makes the image fit inside the containing block.
This only works when you set the width and height of the container of the image, if you want a fixed width and height for all images with different sizes you could just set the height and width through css but that would make the images stretch so the best practice is to set fixed width and height for the image container and use object-fit contain for the image.
I have an inline <SVG> that defines it's viewBox but not it's height or width. I used to set width/height to the same values as the viewBox while creating the SVG; the benefit is that the final image is scaled to the SVG's natural units, which I want; the problem is that a fixed width/height might overflow the parent container in the final page. Removing width/height from the <SVG> causes the image to be rendered as large as the parent container allows, which is almost always larger than the SVG's natural units.
Is there a way to scale an <SVG> to it's natural units, yet scale it down (!) if the parent container is too small?
If you're not bound to using the inline svg (and not bound to IE scaling...), an svg in <img> is your friend.
When an SVG file has a viewBox, and it is embedded within an <img>,
browsers will (nearly always) scale the image to match the aspect
ratio defined in the viewBox.
HTML
<figure>
<figcaption><code>img</code>, auto size</figcaption>
<div>
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/91525/potofgold.svg">
</div>
</figure>
Result
Inline SVG scaling support is not as far... Read from this amazing article to learn more about how this works See point 4 for a wide-support solution. It recommends using a padding-bottom hack, which is common in iframe-embeds also.
there is probably a very simple answer to this very simple question, but i just can't to seem to find it, and its driving me crazy. what I have is a div element at the bottom right corner of the window with an image in it approx. 260 x 300 px.
my css code is this:
#doomdiamond{
position:absolute;
right:50px;
bottom:50px;
}
and html is this
<div id="doomdiamond">
<img src="doomdiamond.gif" />
</div>
all pretty simple. the element shows up with the image inside of it at the proper distance from the browser window. but what i really want it to do is scale/resize itself proportionally when the browser is resized, instead of staying the same size.
this is possible right?
I have created an example for you showing an image that sits in the lower-right corner, with the size based on the width of the window.
It works by setting the image width to a percent value. Percentages are based on the containing parent; because I did not cause the #doomdiamond div to be absolutely placed, it is not the positioned parent of the object.
Setting only the width or height of an img element causes the image to be proportionately scaled.
P.S. This uses no JavaScript :p
Yes it is possible, you will need some JavaScript to do it though. Are you using any JS frameworks ?
UPDATE
Looks like resize div and its content on browser window resize is what you're looking for
I am trying to resize an image using only CSS, the problem is I don't know it's dimensions.
What I have tried so far is putting the into a and then making the image have 105% width. The idea was that the containing div would have no size other than it's contents, but this is only make the image the size of the next ancestor that does have an explicit size.
In order to resize something in CSS you have to either give it an exact pixel value or base the size on something else.
If you were to set an image to have a width of 105% of its container then that container must have some width for you to use. If it's a regular div with no styling applied then its width will be the full width of that divs parent and your img will be 105% of that.
If the div holding the img is floated then it will be getting its width from its contents (aka the img). This won't work because you can't have two elements getting their widths from each other. One of them has to be constrained somehow.