Let's solve a simple CSS challenge:
- Your task is to display animal pictures in the grey box as seen in the example below
- The image size should be 150x150 pixels
- Keep in mind that the aspect ratio of the image must be maintained, so not all of it will fit into the square
- Since most images will exceed the allowed 150x150 dimensions, we want to focus on displaying the middle part of the image
Here is some HTML code:
<div class="gallery-item" style="height: 232px;">
<img src="/media/animals/images/african-buffalo.jpg" alt="African Buffalo ">
<div class="gallery-item-caption">
<a href="/animals/african-buffalo" title="African Buffalo ">African Buffalo </a>
</div>
</div>
And here is some CSS code:
.gallery-item {
float: left;
padding: 15px;
margin: 15px;
background-color: #ececec;
}
Take a look at the result: