Coding Wiki
Most Common Coding Questions
Find answers to popular programming questions and level up your coding skills
How to change image size css code
Learn how to use CSS to resize images and control their layout.
Changing the size of an image using CSS can be achieved in several ways, depending on your specific needs and the type of image you're working with. Here are some common methods to resize images in CSS:
<img src="image.jpg" width="50%" height="30%">
1. Using the width and height attributes: You can specify a percentage or pixel value for both width and height to resize an image. For example, width: 50%; will scale the image down to 50% of its original size, while height: 30% will set the height to 30% of the parent element.
2. Using CSS grid or flexbox: These layout modes allow you to create flexible layouts that can adapt to different screen sizes and orientations. You can use the grid-template-columns or flex-basis properties to set a fixed width for your image, while adjusting its height accordingly.
3. Using the object-fit property: This property allows you to control how an image is scaled when it's larger than its container. For example, object-fit: cover; will scale the image to fit its container while maintaining its aspect ratio.
<img src="image.jpg" style="width: 50%; height: 30%; object-fit: cover;">