'How to display image horizontally in block div?

I have a grid parent block:

<div class="grid">
   <div><a><img></a></div>
   <div><a><img></a></div>
</div>

.grid{
    display: grid;
    grid-template-columns: repeat(6, 200px);
    gap: 10px;

}

I try to display images horizontally no depends size. Now I get images by full size.

I tried to set height for div as div {height: 140px} and img {width: 100; height: auto; object:fit:cover}

css


Solution 1:[1]

if you want the image to be responsive to its container use relative units

try this

img {
   height: auto;
   width: 100%;
 }

Solution 2:[2]

Use this on your CSS to rotate the element 90 degres:

transform: rotate(90deg);

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Mohammad Esam
Solution 2 Skatox

Related Questions