Back ArrowExplore all kits

Different sizes of image in basic HTML/CSS

share link

by Abdul Rawoof A R dot icon Updated: Jan 24, 2024

technology logo
technology logo

Guide Kit Guide Kit  

One of the simplest ways to resize an image in HTML is using the height and width attributes on the image tag. These values specify the height and width of the image element. The values are set in px i.e. CSS pixels.

You can use the object-fit property to size the image elements:

  • cover stretches or shrinks the image to fill the container. ...
  • contain stretches or shrinks the image to fit inside the container.
  • scale-down shrinks the image to fit inside the container.

The background-size CSS property lets you resize the background image of an element. It overrides the default tiling of the image at its full size by setting the image's width and/or height. By doing so, you can scale the image upward or downward as desired. With Cascading Style Sheets (CSS), you can change image and background size and shape. You have three resizing options. They are absolute resizing, keeping the aspect ratio, and relative resizing. You can also scale and fill backgrounds.


Here is an example of how to resize the images in different sizes with basic HTML/CSS:

Fig: Preview of the output that you will get on running this code from your IDE.

Code

Html/CSS size images

HTMLdotLines of Code : 72dotLicense : Strong Copyleft (CC BY-SA 4.0)

.card-container {
  display: flex;
  justify-content: space-between;
}

.card {}

.card-image {
  width: 150px;
  height: 150px;
}

.card-image img {
  display: block;
  width: 100%;
}


/* Alternative with BG images */

.card-image-bg {
  width: 150px;
  height: 150px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.card:first-of-type .card-image-bg {
  background-image: url("http://via.placeholder.com/350x150");
}

.card:nth-of-type(2) .card-image-bg {
  background-image: url("http://via.placeholder.com/250x190");
}

.card:last-of-type .card-image-bg {
  background-image: url("http://via.placeholder.com/400x400");
}
<div class="section">
  <div class="card-container">
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/350x150"></div>
      <p class="title">Image 1 caption 1</p>
    </div>
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/250x190"></div>
      <p class="title">Image 2 caption 2</p>
    </div>
    <div class="card">
      <div class="card-image"><img src="http://via.placeholder.com/400x400"></div>
      <p class="title">Image 3 caption 3</p>
    </div>
  </div>
</div>

<div class="section">
  <div class="card-container">
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 1 caption 1</p>
    </div>
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 2 caption 2</p>
    </div>
    <div class="card">
      <div class="card-image-bg"></div>
      <p class="title">Image 3 caption 3</p>
    </div>
  </div>
</div>

Instructions

Follow the steps carefully to get the output easily.

  1. Install Visual Studio Code on your computer.
  2. Create a new HTML file.
  3. Copy the snippet using the 'copy' and paste it into that HTML file.
  4. Keep the entire code inside the HTML and body tags.
  5. Then keep the CSS code inside the style tag(refer preview of the output).
  6. Save and Run the HTML file directly from the file location.


I hope you found this useful.


I found this code snippet by searching for 'html css size image' in Kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

  1. The solution is created in Visual Studio Code 1.74.1.


Using this solution, we are able to create different sizes of images with basic HTML/CSS with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to create different sizes of images with basic HTML/CSS.

FAQ

1. How can I resize an image in HTML using the simplest method?

One of the simplest ways to resize an image in HTML is by using the height and width attributes on the <img> tag. Set the values in pixels (px) to specify the desired height and width of the image element.


2. What is the purpose of the object-fit property in CSS when resizing images?

When you adjust the size of the <img> element, CSS controls how it behaves. The object-fit property does this. For example, the cover stretches or shrinks the image to fill the container. The container does the same but fits inside the container. Scale-down shrinks the image to fit inside the container while keeping the proportions.


3. How does the background-size CSS property work for resizing background images?

The CSS property background size lets you resize the background image of an element. You can scale the background image up or down by setting the width and/or height. This overrides the default behavior of tiling the image at its full size.


4. What are the three available options for resizing images in CSS?

The three resizing options in CSS are:

  • Absolute resizing: Setting fixed values for width and height.
  • Retention of aspect ratio: Maintaining the original proportions of the image during resizing.
  • Relative resizing: Adjusting the size relative to the container.


5. How can I scale and fill backgrounds using CSS?

To scale and fill backgrounds, you can use the background-size property. It takes values like cover or contain. For example, `background-size cover` will enlarge or shrink the image. It will do so to cover the whole container. In contrast, background-size: contain does the same thing. But, it ensures the image fits inside the container.

Support

  1. For any support on kandi solution kits, please use the chat
  2. For further learning resources, visit the Open Weaver Community learning page.


Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow

  • © 2023 Open Weaver Inc.