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%,
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:
Search WWH ::

Custom Search