HTML and CSS Reference
In-Depth Information
pixels tall but are less specifically concerned about how wide it is, we can set the height
to 200 pixels, and the width of the image will adjust accordingly. Setting both a width
and height will work also; however, doing so may break the aspect ratio of an image,
causing it to appear distorted (see Figure 9.3 ) .
1. img {
2. height: 200px;
3. width: 200px;
4. }
Figure 9.3 An image with defined width and height that cause it to be distorted
While using the width and height attributes directly in HTML provides some semantic
value by noting an image's original size, it can be difficult to manage numerous images that
all need to be the same size. In this event, it's common practice to use CSS to resize the
Positioning Images
We can use a number of different approaches to position images on a web page. By default
images are positioned as inline-level elements; however, their positions may be changed
using CSS, specifically the float , display , and box model properties, including pad-
ding , border , and margin .
Search WWH ::

Custom Search