Image in CSS
Menu
Image in CSS
In CSS, you can style images using various properties to make them more visually appealing and better integrated with your website design. Here’s an example of how to style an HTML image using CSS:
HTML:
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="My Image" data-lazy-src="image.jpg"><noscript><img decoding="async" src="image.jpg" alt="My Image"></noscript>
CSS:
img {
max-width: 100%;
height: auto;
border-radius: 5px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.2);
}
This CSS applies the following styles to the image:
- The max-width property sets the maximum width of the image to 100% of its container to ensure it does not exceed the width of the page.
- The height property is set to “auto” to maintain the aspect ratio of the image and prevent it from being stretched or distorted.
- The border-radius property rounds the corners of the image to create a softer, more aesthetically pleasing effect.
- The box-shadow property adds a subtle shadow effect to the image to create depth and separation from the page background.
These are just a few examples of how to style images using CSS. There are many other properties you can use to further customize images, such as opacity, filters, and blend modes.
Menu
Join To Get Our Newsletter