ok im having a problem with images on my own project website.
i am trying to include several divs of images with text to fill the whole page vertically. So, an image and text followed by another image and text further down and so on.
my problem is that i can not get the images to display properly, they are displaying huge across more than the browser’s width and height so you have to scroll both down and across just to see the whole image. can anyone suggest what im doing wrong?
heres some of my code i’m using:
html:
section class=“main-container”>
div class=“image-container”>
a href=“#”>img src=“resources/images/perfume.jpeg”>/a
</div
div class=“text-container”>
h2>Perfume
p>A Smell For Every Occasion
/div>
div class=“image-container”>
a href=“#”>img src=“resources/images/accessories.jpeg” alt=“accessories”>
</div
div class=“text-container”>
h2>Accessories
p>Accessorise yourself!
</div
CSS:.main-container{
width: 100%;
height: auto;
)
.image-container {
display: inline-flex;
width: 100%;
height: 100px;
overflow: hidden;
position: relative;
This code actually cuts the image down to a more likeable size but now i cannot see the whole image.
i have removed some of the opening and closing tags so it would display in the message but you get the idea.
Hi there!
To display code without the forums trying post it as HTML, place it in between layered backticks like below.
```
type or paste code here
```
But to the problem at hand, there is currently a height given to the image-container with its overflow being hidden. This makes it so that the container can only be 100px tall and anything that overflows from there will be hidden. You cannot see the whole image because it’s larger than 100px. If you want the images to match that height, then you’ll want to apply max-height 100% to the img selector.
As for the images overflowing on the x-axis, images will grow to their maximum width unless given a value that changes that behavior. This is usually done by giving a max-width of 100% so they do not overflow their container. However, it is important to remember that block-level elements such as div and section inherently grow to 100% of their container and will grow if their children are larger. Applying a max-width on the container in conjunction with max-width 100% on an img ensures no overflow with responsive images.
img src=“resources/images/accessories.jpeg” alt=“accessories”> width=“50”
You have to introduce the width element to determine the size of your image. The width element comes at the end before the closing tag of the link () .