CSS Image
What is Image in CSS?
Properties like height, width, border, background color, and border radius could be used to format and determine pictures the desired way.
Image Size:
Sets the width and height of the image.
img {
width: 300px;
height: 200px;
}
Max Width/Height:
Sets the maximum width and height of the image, maintaining its aspect ratio.
.responsive-img {
max-width: 100%;
max-height: 100%;
}
This is so in order to create images that are responsive and adaptive because they need to match the size of the container on the screen.
Image Borders:
Adds a border around the image.
img {
border: 2px solid #ddd;
border-radius: 8px; /* adds rounded corners */
}
Image Opacity:
Adjusts the opacity of the image.
img {
opacity: 0.8;
}
Image Filters:
Applies visual effects like grayscale, blur, etc.
img {
filter: grayscale(50%);
}
Image Positioning:
Controls the positioning of the image within its container.
img {
object-fit: cover; /* scales the image to cover the container */
}
Image Hover Effects:
Adds hover effects to images.
img:hover {
transform: scale(1.1); /* increases the size on hover */
}
Image Shadows:
Adds a shadow effect to the image.
img {
box-shadow: 2px 2px 5px #888888;
}