HTML and CSS Reference
In-Depth Information
Fixing the Size of Images
Another thing we want to correct in our layout is the way the images look when the user
is visiting the page with a smaller browser window or device. First, let's deal with the big
promo image.
Let's add a line to our
.promo
styles:
.promo {
position: relative;
z-index: 5;
padding-bottom: 8px;
box-shadow: rgba(0, 0, 0, .25) 0 3px 2px 0;
background-image: linear-gradient(#4e0324, #4e0324 97%,
#851f49);
overflow: hidden;
}
Here we've added the
overflow
property with a value of
hidden
. This is going to ensure
that when the
.promo
element gets smaller, the big promo image that's inside it will not
overflow the boundaries of
.promo
, but instead, any excess parts of the image will hide
from view.
Then we'll add a new rule set that targets our promo image:
.promo img {
width: auto;
height: auto;
}
Here we're setting the
width
and
height
of the image to a value of
auto
to ensure the
CSS overrides any dimensions set in the HTML using width and height attributes. If we
didn't define a width and height in the HTML, then these styles wouldn't be necessary.
Next, we'll deal with the images inside the
.media
elements. Let's add three lines to the
styles for those, in addition to the percentage value for the right margin:
