The original:CSS you Don’t Know is an equally scaled box

As you probably already know, for an IMG element, you can individually change its width or height properties to set its size while keeping the image scale the same.

As shown in the picture below, the top is the original size of the image, and the bottom two are the images with width: 50% and height: 50% set respectively.


You can see that when you set the width to half of the original size, the height of the image does not remain the original size, but correspondingly becomes half of the original size, so that the image can still maintain the original proportion. The same goes for setting the height to half of what it was before.

As a comparison, let’s see what happens when we modify the width and height of other elements individually:


The blue rectangle on the far left of the image is the original div element, and the next two look like it with the width: 50% and height: 50% attributes set, respectively. You can see that unlike the IMG element, when you set the width (height) of a div element separately, the corresponding height (width) does not change, causing the element’s proportions to change. This result I believe that everyone who has some understanding of the front end can guess. But what causes the same attribute to yield different results when used for img and div?

Img is classified as an element that is replaced. The element replaced indicates that the display of the element’s content is not controlled by CSS. In other words, for the IMG element, the content of the image is not defined by CSS, but by the resource to which its SRC attribute points. Intrinsically, many elements have their own Intrinsic dimensions.img is no exception. When the img height changes, the browser calculates the scale, and when the element width is Auto (the default), the browser uses the original width * scale as the new width. This keeps the proportions of img elements consistent.

But that’s not the point of this article. Please don’t use dirty words, it’s uncivilized

What’s the point? The point is the title: a box with equal scale.

In a world where responsive design is becoming mainstream, the term streaming layout would not have been new even a year or two ago. Here is an example layout:


In the image above, each blue rectangle corresponds to a div element, and each element is a quarter of the width of the window (margin effects are added to each element for illustration purposes). If no additional processing is done, the page above will look something like this as the window width shrinks:


You can see that the width of each element has been scaled, but the height has not changed, which doesn’t look very harmonious. Therefore, when the window width is scaled in some scenarios, we need to make the element width adaptive while ensuring that the ratio of width to height of each element remains unchanged.

Many students in my words have not finished, have already taken out JavaScript sledgehammer to start to implement. However, the title of this series of articles, CSS you Don’t Know, is not going to cover the fact that CSS can’t fulfill this self-defeating requirement, and in this case, using JavaScript doesn’t work very well. After the onresize event is bound, some constellation friends will notice a bit of lag when dragging and dropping (just try it out), and it won’t be visible until the JavaScript is loaded.

It’s easy to do this with CSS, using the same property we use every weekday and weekend (if we’re working overtime) : padding-bottom. One feature that’s easy to overlook is that when the value is a percentage, the base of the percentage is the width of the element’s parent, not the height (as with padding-left and padding-right). The solution is obvious:

  1. The element ofheightset0, such that the height of the element is equal topadding-bottom;
  2. Setting up reasonablepadding-bottomThe value of the. For each elementwidth 是 25%, now you want the height of the element to always be twice its widthpadding-bottomShould be set to50%.

The results are shown below:


The corresponding code can be seen at jsfiddle.net/luin/25BbH/… .

However, this article is not finished. If the element overflow is hidden, will the text inside be hidden because it exceeds the height of the element?

The answer is no. According to CSS 2.1 specification 2, overflow will only apply to content outside of the padding edge, that is, only content outside the padding area will be hidden by overflow property.

  1. The one exception to this rule is that when img is SVG, it has no intrinsic size. ↩
  2. www.w3.org/TR/CSS2/vis… ↩