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.
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"
<img src="images/nice seafront.jpg" alt="Nice seafront" width="268" height="178"
Search WWH ::

Custom Search