How to display image horizontally in block div?-CodePudding

I have a grid parent block:

<div >
   <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}

CodePudding user response：

use on css

transform: rotate(90deg);

CodePudding user response：

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

try this

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