Issue encountered while trying to display images next to each other using only HTML and CSS

https://i.sstatic.net/OAjCG.jpg

I am facing an issue with the vertical space between the top and bottom rows of my portfolio. There seems to be some unwanted space in the rows that I cannot account for. It doesn't seem to be a margin or padding within the box, so I suspect the problem may be related to the img tag. Can anyone offer some assistance?

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
}
<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

htmlcssimage

Answer №1

It appears that the issue may be related to maintaining the aspect ratio of the images. When adding height: 100%, the solution seems to work:

.portfolio.row {
display: flex;
}
.col-4 {
  flex: 33.33%;
}
.portfolio > div img {
  width: 100%;
  height: 100%;
}
<div class="portfolio row">
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="coffe">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>
<div class="portfolio row">
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature1">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature2">
  </div>
  <div class="col-4" id="work">
    <img src="https://cdn.pixabay.com/photo/2019/05/07/16/19/strawberry-4186310_960_720.jpg" alt="Nature3">
  </div>
</div>

Answer №2

To resolve the issue, simply apply the code snippet provided below. By setting height: 100%;, your problem should be solved. You can also refer to this demonstration for a clear example.

.gallery>div img {
  width: 100%;
  height: 100%;  /* Add this extra value */
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Update the parent node in the Google Org Chart

This is my first time working with Google Charts and I have a couple of questions: Is there a method in the API to update the parent of an existing node? I am facing a challenge where I need to build a tree structure top-down, which means that I know the ...

javascriptjqueryhtmlcssgoogle-visualization

Formatting tables

Below is the table structure that I have. I attempted to insert empty tds divs in order to achieve the formatting shown in the image, but I have not been successful. Any suggestions or ideas would be greatly appreciated. <table border="0" cellpadding=" ...

htmlcss

The animation is not updating quickly enough

I'm working on a navigation bar that sticks to the top of the page. As the user scrolls down, I want the bar to shrink, and when they scroll back up, it should return to its original size. Issue: The problem I'm facing is that when the user quic ...

javascriptjqueryhtmlcss

Linkify Method appearing in html.erb file displaying with HTML on the view

Apologies if this question seems basic, but I am encountering an issue when calling the following method on the @page instance variable. The view is displaying HTML tags instead of the desired content... module PagesHelper def linkify_page page rege ...

htmlruby-on-railserblinkify

What is the best way to apply various styles using the ng-style directive in different scenarios?

When working in Angular, I am attempting to apply different style attributes based on varying conditions. However, the typical conditional expression method is limited to just two conditions and is not providing the desired results. <div ng-style=" ...

javascriptcssangularjsng-style

Ensuring the text remains positioned above another element constantly

Looking to have the text float above a regular box and resize the font size accordingly? Here's what I've tried: https://jsfiddle.net/a87uo3t2/ @import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono'); body { margin: ...

htmlcss

Opera browser having trouble with sidebar rendering

On my best days, I struggle immensely with troubleshooting browser display issues. The left-hand sidebar on this page () appears incorrect in Opera. While in all other browsers, the sidebar displays with an orange and tan background, for some unknown reas ...

htmlcssopera

Is there a method to trigger click events on overflow content when clicked?

I am currently tackling a significant issue: I need the drop-down options' width to be wider than where the selected value is displayed, especially in IE7. After conducting some research on Google, I decided to take matters into my own hands and write ...

jqueryhtmlcss

Click X button to toggle and close the dropdown menu

After successfully creating a responsive menu that toggles with a hamburger icon at 1205px resolution, I encountered an issue. Once the hamburger icon is clicked and the dropdown menu opens, there seems to be no way to close it. I am looking to add an X bu ...

htmlcssbootstrap-4navbartoggle

What is the reason behind the avoidance of using sequential numbers for storing images?

I've noticed that platforms like Instagram and Facebook use long strings to name their images (e.g. instagram/p/BB-cCvtje4k). Is there any downside to naming pictures as thisuser/1, thisuser/2, and so on? Is it considered poor practice in server-side ...

phpdatabaseimageserver-side

Extend the height of bootstrap 5.2.0 row/column to reach the bottom of the page

I'm having difficulty extending the left navigation section to reach the bottom of the page while remaining responsive. Despite trying various solutions like h-100, flex-grow, min-vh-100m self-align: stretch, nothing seems to solve the issue. Check o ...

htmlcssheightbootstrap-5

react component not displaying image

I must admit, this might be a silly question but I'm just starting out in web development. My goal is to create a clickable image component that redirects to another page on the website. However, despite not encountering any errors, the image is not ...

javascriptreactjsimage

Using jQuery to access specific elements within the DOM by navigating through the document structure

I'm currently facing a challenge with using jquery's parents/siblings functions to locate specific input elements. Despite my efforts, I can't seem to get it right. Here is the HTML structure I am working with: <div id="ExtrasOptions"&g ...

jqueryhtmlparent-child

Styling components using classes in Material-UI

I recently started using material-ui and noticed that it applies inline styles to each component. After running a test with multiple instances of the same component, I realized that there was no CSS-based styling - only repeated inline styles were generate ...

javascripthtmlcssreactjsmaterial-ui

What is the best way to create a gallery using Bootstrap 4?

I'm currently working on a project for my homework that involves replicating a car brand page, but I've hit a roadblock at this particular section. https://i.stack.imgur.com/0Zfr5.jpg My goal is to recreate the gallery using a .container with n ...

cssbootstrap-4html

Sort the elements within the *ngFor loop according to the category upon clicking the button in Angular

Currently, I have a collection of items that I am iterating through using *ngFor. Above this list, there are category buttons available as shown in the HTML snippet below. My goal is to enable filtering of the list based on the category of the button click ...

javascripthtmlangularangular-pipe

Introducing a new div element completely disrupts the overall layout

Take a look at the code I have provided below. http://jsfiddle.net/xymgwonu/3/ Everything was working perfectly fine until I introduced a new div with the class name <div class="bubble"></div>. This caused some issues with the overall design. ...

htmlcssbootstrap-4

Tips for adjusting the initial scale to ensure your mobile website fits perfectly on the screen

I'm trying to figure out the best way to adjust the 'initial-scale' so that my website's width fits perfectly on any device screen when first loaded. Check out my website here: While it looks fine on regular browsers, I had some issue ...

htmlcssmobileviewport

The new version 5.1 of Bootstrap modal does not disable scrolling on the <body> element

I'm currently working on a project in Angular 11 using Bootstrap (v5.1.3). My main goal is to create a functionality where clicking on a card, similar to a blog post, will trigger a Bootstrap modal popup displaying the content of that specific post. B ...

htmlcssbootstrap-modalbootstrap-5bootstrap5-modal

The buttons on the Bootstrap Carousel are unresponsive and the indicators are not displaying as they should

I am currently attempting to replicate a bootstrap carousel that includes indicators. However, in my code, I am unable to view the indicators, and the previous/next buttons are not functional. Although I came across a workaround that I could modify from th ...

javascripthtmlcssbootstrap-5