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
images.
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