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.
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
Let's say I have a container that looks like this:
<div class="playing-card">
<p>Ace of Spades</p>
</div>
What I want to do is style the playing-card container to always have an aspect ratio of 5 / 7. If the container is too short, I want the playing card to be constrained by its height. If the container is too narrow, then the playing card should be constrained by its width.
Is something like this possible with CSS? I know this can be done with object-fit on replaced elements (such as images and videos), but my actual use case specifically needs to be a div with normal HTML content.
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 having a problem with the width of a code block I have inside of a list element. This list element is set by JavaScript, as it is used with Swipejs, to the width of the page.
However, the problem I have is that when the <pre> element has got a large block of text on a single line that surpasses the width of the parent, the list element expands. My question would be how can I prevent this from happening and force the <pre> element to have a set width to the <li> width while having overflow:scroll?
<li>
<pre class="language-css"><code class="language-css">
</code></pre>
</li>
I am aware that this can be done by defining a specific fixed width to the <pre> element but as it should work with different screen sizes, this is not possible. I hope you can help. Thanks!
Here is my HTML structure:
<li>
<div class='wrapper'>
<div class='controller'> ... </div>
<div class='preview'> ... </div>
</div>
</li>
The content in the 'controller' and 'preview' divs can vary, and thus so can the height of the content. There isn't necessary a correlation between the heights of the 'controller' and 'preview' divs. In a given wrapper one might be 10px high while the other one is 100px high. I want the smaller one to expand to match the height of the smaller one. Using a css rule of "height: 100%;" doesn't work because there's no explicit height set to the wrapper, and again i can't set a height to the wrapper, because the content inside of it can vary.
I am looking for a solution in css not javascript. My company has a strict policy of writing for browsers that don't have javascript enabled.
Using 100% height for a div will only take up as much as the content of the div needs. You will have
to explicitly set the height.
You can do this by using some javascript:
var height = document.getElementById('parentDiv').style.height;
document.getElementById('childDiv').style.height = height +'px';
It could be set with a script or when you don't want to use JS you could use the faux columns technique:
http://www.alistapart.com/articles/fauxcolumns/
Assuming the two divs are next to eachother (using a float or whatever), this is a very common problem in HTML that still doesn't have a native solution.
One method to solve this is the faux columns, but this has it's limitations: usually a very wide border is used to fake the background color of the smaller div, so you can only use a solid color.
If you really need the height to be the same (for reasons of using the same borders on both divs, background images, or even positioned elements inside the divs that both need to be in the bottom of the div) you'll have to use a javascript solution.