Website Building » Squarespace » How Do I Change the Size of an Image in Squarespace CSS?

How Do I Change the Size of an Image in Squarespace CSS?

Last updated on December 28, 2022 @ 8:30 pm

There are a few different ways to change the size of an image in Squarespace CSS. The first way is to use the width and height properties.

These properties allow you to set the width and height of an element in pixels. For example, if you wanted to make an image 200px wide and 300px tall, you would use the following CSS:

img {
width: 200px;
height: 300px;
}

Another way to change the size of an image is to use the max-width and max-height properties. These properties work similarly to the width and height properties, but they set the maximum width and height of an element. So, if you wanted to make sure that an image never exceeded 200px in width or 300px in height, you would use the following CSS:

img {
max-width: 200px;
max-height: 300px;
}

Finally, you can also use the resize property to change the size of an image. This property can be set to one of four values: none, both, horizontal, or vertical. If you set the resize property to none, the image will not be resizable. If you set it to both, the image will be resizable in both directions.

PRO TIP: If you are not familiar with CSS, we recommend that you seek help from a Squarespace expert or our Customer Care team before making changes to your site. Making changes to your site's CSS can cause your site to malfunction if not done properly.

If you set it to horizontal, the image will only be resizable horizontally. And if you set it to vertical, the image will only be resizable vertically. For example, if you wanted to make an image that was resizable only horizontally, you would use the following CSS:

img {
resize: horizontal;
}

Conclusion: How Do I Change the Size of an HTML Image? To change the size of an HTML image, use either the width or height attributes.

You can also use CSS3's max-width and max-height properties. Finally, you can make images resizable using CSS3's resize property.

Kathy McFarland

Kathy McFarland

Devops woman in trade, tech explorer and problem navigator.