CSS Image Styling
Jakob Jenkov |
CSS can be used to style images inside HTML pages. By images I mean images included using the
img HTML element. In this text will cover
the options you have for styling images via the img element with CSS.
margin
The margin CSS property enables you to set the distance between the image and adjacent HTML
elements. CSS margins are covered in more detail in my tutorial about margins in CSS.
Actually, the margin is the distance between the border around the image to the adjacent HTML elements. If the image has no border, the margin will be the distance between the edge of the image padding to adjacent HTML elements. If the image has no padding, the margin will be the distance between the image itself to adjacent HTML elements.
border
You can set borders on an image (img element) using the border
CSS property. CSS borders are covered in more detail in my tutorial about CSS borders.
Here is an example that sets a border on an image:
img.withBorder {
border: 1px solid #cccccc;
}
This example CSS rule sets a 1 pixel gray border around all img elements which
have the CSS class withBorder ( <img class="withBorder">).
Here is how an image looks with the above border styling applied:
padding
The padding CSS property sets the distance between the image and its border.
Padding is covered in more detail in my tutorial about padding in CSS.
Here is an example that sets both padding and border around an image:
img.withBorderAndPadding {
padding : 10px;
border : 1px solid #cccccc;
}
Here is how the image looks with these CSS styles applied:
width and height
You can use the width and height CSS properties to set the width
and height of an image. The width and height CSS properties are
also covered in my tutorial about the CSS box model.
If you set a width and height that is different from the image's own width and height, then the browser will scale the image up or down to match the width and height you set. Here are some width and height CSS examples:
img.scaledUp {
width: 300px;
height: 150px;
}
img.scaledDown {
width: 300px;
height: 150px;
}
Here is what the images would look like with the above styles applied. The first image shows the natural size of the image. The two following images are scaled up and scaled down.
Keeping Image Aspect Ratio
Scaling images by setting both width and height may result in
distorted images, meaning the aspect ratio between width and height might be lost.
To scale an image while preserving aspect ratio, set only the width or
height CSS property. The browser will then calculate the other aspect
(height, if width is set, or width, if height is set) based on the set width or height,
so the aspect ratio of the image is kept. Here are two examples which set only
the width and height:
img.scaledUp {
width: 300px;
}
img.scaledDown {
height: 150px;
}
Here are what the images would look like when rendered:
Width and Height as Percentages
You can set width and height to percentages. In that case the image will get
a width and / or height which is a percentage of the width or height of its parent HTML element.
Here is an example:
img.percentages {
width: 25%;
}
This examples sets the width of the image to 25% of its parent HTML element width. If the parent
HTML element is scaled up or down in size, so is the image.
max-width and max-height
You can set a maximum width and height for the image using the max-width and
max-height CSS properties.
Setting a maximum width or height can be useful if the image is using percentages as width or height.
In case the user maximizes the browser, perhaps you don't want your image to be scaled up to fill the
full browser window (or whatever size the image's parent element has). Setting a maximum width and
height might be useful in that case. Here is an example setting a max-width on an image:
img.withMaxWidth {
width: 100%;
max-width: 500px;
}
This example CSS rule sets the width of the img element with the CSS
class withMaxWidth to 100% of its parent element. However, the example
limits the image to a maximum width of 500px. Once the image reaches a width of 500 pixels,
the browser will no longer scale it up, regardless of the width of the parent element.
min-width and min-height
The min-width and min-height CSS properties work like the max-width
and max-height CSS properties, except the set a minimum width and height for the image
(or whatever HTML element they are applied to.
Responsive Images
Responsive images are images that are part of a responsive web design and which behave accordingly. A responsive web design is a web design which is capable of responding sensibly to the device it is being viewed on, whether that device be a mobile phone, tablet, laptop, desktop or TV.
On a small screen you might want to show smaller images than on a large screen. You might also want to limit
the size of an image to fit inside smaller screens (using max-width).
As part of my responsive, mobile friendly web design tutorial I have a text which specifically explains how to implement responsive images.
| Tweet | |
Jakob Jenkov | |
