While working on designing cards in cakephp, I encountered an issue when trying to display images wider than 600px - they extended beyond control!
Oddly enough, using placeholder or dummy images doesn't cause any problems.
Why is this happening? How can I adjust to show smaller images instead?
The inline HTML width and height constraints are not solving the problem.
<div class="cards">
<div class="image">
<img src="https://dummyimage.com/600x150/000/fff" >
</div>
</div>
https://i.sstatic.net/aQPRc.png https://i.sstatic.net/ZoXqn.png
* {
margin: 0;
padding: 0;
}
.cards {
width: 30%;
background: #999;
}
.image img {
width: 100%;
}
.title {
text-align: center;
}
.des {
text-align: center;
}