Seeking guidance from CSS/Bootstrap experts as I navigate the world of web design. I'm struggling to ensure an image fits perfectly within a div without distortion, especially when dealing with varying sizes due to user uploads. I admire how Windows Mail handles this by cropping and zooming in on the center for a neat thumbnail effect. You can view the image here: This is particularly crucial for mobile views around 375px. Check out my JSFiddle code snippet below, although it's not entirely functional, the link provides a better demonstration.
https://jsfiddle.net/dfmrjqs1/
.RestrauantMainLi{
border: 1px solid rgb(155, 155, 155);
border-radius: 5px;
margin-bottom: 25px;
height: 140px;
transition: all 200ms ease-out;
}
.RestrauantLiIcons{
display: flex;
justify-content: space-between;
}
/* Other CSS rules included in the provided code */
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://kit.fontawesome.com/3590d6dbc0.js"></script>
<body>
<div class = 'container RestrauantMainLi'>
<!-- HTML content structure goes here -->
</body>
</html>If you have insights on refining my CSS or HTML structure, or any general feedback, please share your expertise. Much obliged for your assistance! Thanks!