@MikDra1
Posted
Nice one @RedMwp 😀
If this comment was useful please mark it as helpful 💗
If you want to have the image the same aspect ratio as in the design here are some tips from me:
Method 1: Using a Container with overflow: hidden;
HTML:
<div class="image-container">
<img src="your-image.jpg" alt="Truncated Image">
</div>
CSS:
.image-container {
width: 300px; /* Desired width */
height: 200px; /* Desired height */
overflow: hidden;
position: relative;
}
.image-container img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
/* You can also adjust the width and height to control how the image is cropped */
}
Method 2: Using object-fit: cover;
If you want the image to automatically scale and crop itself to fit within the container, you can use the object-fit property.
HTML:
If you want the image to automatically scale and crop itself to fit within the container, you can use the object-fit property.
CSS:
.image-container {
width: 300px; /* Desired width */
height: 200px; /* Desired height */
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover; /* This crops the image */
}
Method 1: The container has a fixed size, and overflow: hidden; hides any part of the image that doesn't fit within the container's dimensions. You can adjust the width and height of the img tag to control the crop.
Method 2: object-fit: cover; ensures the image covers the entire container while maintaining its aspect ratio. The image is automatically cropped to fit the dimensions of the container.
Good job and keep going 😁😊😉
Marked as helpful
@RedMwp
Posted
very helpful, thank you@MikDra1