HTML and CSS Reference
In-Depth Information
■
it's the text box that's scaled, not just the font size. if you scale a paragraph of text horizontally, the text is
not reflowed.
Note
The
scale()
function accepts one or two arguments. If you pass it a single number, the same scaling factor
is applied to both axes. If you pass it two numbers separated by a comma, the first is used as the scaling factor for
the X axis and the second for the Y axis.
In scale_2.html, two
400px
wide images are scaled to two-thirds of their normal size like this:
.scaleimg {
/* Other styles omitted */
transform: scale(0.66);
}
As Figure
20-10
shows, the images are reduced in size, but they still occupy their normal space, leaving a
wide gap all around them. This happens even if you remove the
width
and
height
attributes from the
<img>
tags
in the HTML markup.
Figure 20-10.
Scaling images reduces their size, but not the amount of space they occupy
You can't use the
scale()
function if you want to remove the space around images that have been scaled
down. Instead, you need to adjust the
width
and
height
attributes in the HTML. You can then use
scale()
to
restore them to their normal size when hovered over. For example, in scale_3.html, the images have been resized
in the HTML like this:
<img src="images/nice market.jpg" alt="Flower market in Nice"
width="268" height="178"
class="scaleimg">
<img src="images/nice seafront.jpg" alt="Nice seafront"
width="268" height="178"
class="scaleimg">
