Sizing Images
In a CMS (content management system), it is common for a piece of content to have a representative image. In WordPress, the representative image is called a featured image. Nowadays, a typical web page may consist of many small tiles. Each tile, which summarizes a piece of content,contains one image (the featured image), a title and a short description. An example is given below.
An author may choose an arbitrary image as the featured image, whose dimension (width and height) is unknown to the web page. It is more convenient for authors to arbitrarily choose the featured image with a unknown dimension, but this is a challenge for developers to properly make the layout in a beautiful way.
As can be seen in the above screen capture, the page consists of several small tiles. The first step to make the beautiful layout is to create one that small tile. I would like to figure out how to make one small tile in this article. To make the problem simple, I assume the page is displayed on one screen size at one time.
An image in one small tile has several features :
- the image size is unknown
- the image occupies full width of the containing element
- the image keeps its aspect ratio
- the containing element and the image automatically change its size to fit to each other (I am not sure now if this requirement can be fulfilled.)
Put the image in a <div> element is a reasonable choice.
An image can be put in the background of a <div> element, or displayed using a <img> element. These two options are both discussed here.
The basic HTML template comes from Bootstrap starter template, and the Bootstrap-related material is removed. Normalize.css is added.
<!DOCTYPE html>
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8" /><meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/><link
rel="stylesheet"
type="text/css"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
/><link rel="stylesheet" type="text/css" href="style.css" /><title>Responsive image</title></head>
<body>
<div></div>
</body>
</html>
Now I intuitively add the following CSS code.
div {
max-width: 1080px; // to control the max width
min-width: 960px; // to control the min width
margin: 0 auto; // center the div
}div {
// insert the image to the background
background-image: url("/blog.jpg");
}
Unfortunately, nothing appears!
I found the reason here. A block element, such as <div>, can not adapt to its background-image size,because the height of a block element depends on its content by default (see here). Since there is nothing inside the <div>, the height is zero. I did not give up here, and tried to find a way to use the background-image. What if I set the width of the background image to 100% and the height to auto? Still not works, and the reason is the same as above. Seems using background image is not a good option in this scenario.
It is turn for <img> element now.
<div>
<img src="/blog.jpg">
</div>The dimension of the image is 1500x555. I put this image inside the <div> without any style. The browser display the image in the image’s original size (checked this by pressing F12) and the image overflow the <div> element. I'll keep this in mind.
I would like the image width to be exactly the same as the width of the containing element. Therefore, remove background-image property, and add the following CSS code to the style sheet.
div img {
width: 100%;
}Setting width to 100% makes the image as wide as the containing element. Even without explicitly setting the height for the image, the height is automatically set to fit the image’s aspect ratio. The size of the containing element is the same as the image size. So far so good.
For the readability, I use the following CSS code for the image. The line, height: auto also helps developers to know the image height is set to auto to keep the aspect ratio.
div img {
width: 100%; // fully occupy the parent element width
height: auto; // for readability
}The full CSS code is as follows:
div {
max-width: 1080px; // to control the max width
min-width: 960px; // to control the min width
margin: 0 auto; // center the div
}
div {
width: 100%;
height: auto; // for readability
}All requirements are fulfilled.
The next step is to create a small tile that is suitable for small screen devices.
