Quiero conseguir que una imagen sea responsive sin tener que ajustar el ancho y el alto.
body {
background-color: #FDFDFD;
}
img {
height: 200px;
width: 200px;
}
.grid-container {
display: grid;
grid-auto-rows: 230;
background-color: #F4F4F4;
grid-gap: 10px;
justify-content: center;
padding: 10px;
}
.item {
background-color: #E9E6E6;
display: grid;
grid-template-columns: 1fr 2fr;
box-shadow: 0px 1px 3px #888888;
}
.item:hover {
box-shadow: 0px 2px 5px #636262;
}
.img {
padding: 0 15px;
}
.flex-box {
display: flex;
flex-direction: row;
}
.tweet {
margin-left: auto;
align-self: center;
}
@media screen and (max-width: 500px) {
.item,
.item1 {
grid-template-columns: 1fr;
grid-auto-rows: 230;
}
}
<div class="grid-container">
<div class="item item1">
<img src="https://loremflickr.com/640/480?random=1" alt="01">
<div class="img">
<h3>Header1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
voluptatibus consectetur adipisci sapiente eius delectus.</p>
<div class="flex-box">
<p>Fecha<br><span>Autor</span></p>
<p class="tweet">Tweet</p>
</div>
</div>
</div>
<div class="item item2">
<img src="https://loremflickr.com/640/480?random=2" alt="02">
<div class="img">
<h3>Header2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
voluptatibus consectetur adipisci sapiente eius delectus.</p>
<div class="flex-box">
<p>Fecha<br><span>Autor</span></p>
<p class="tweet">Tweet</p>
</div>
</div>
</div>
<div class="item item3">
<img src="https://loremflickr.com/640/480?random=3" alt="03">
<div class="img">
<h3>Header3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Numquam explicabo distinctio placeat
voluptas, tempora at iure libero aut provident velit similique ducimus inventore! Quaerat
voluptatibus consectetur adipisci sapiente eius delectus.</p>
<div class="flex-box">
<p>Fecha<br><span>Autor</span></p>
<p class="tweet">Tweet</p>
</div>
</div>
</div>
</div>