Troubleshooting Problems with Image Width in CSS Styles

I am facing an issue with displaying 3 images in a row side by side. The first image is bigger than the other two, causing them to be pushed down to the next row, which is not what I want. I have created a class and specified the height and width, but it doesn't seem to be working.

.workImgs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  width: 100vw;
  max-width: 100rem;    
}

.workImg {
  object-fit: cover;
  height: 20rem;
  margin: 0.5rem;
}
<div class="workImgs">
  <a href="#" target="_blank"><img src="https://picsum.photos/245/182" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/185/184" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/184/165" alt="" class="workImg" /></a>
</div>

This result shows that the first image's width needs to be adjusted to match the size of the other two so they can all fit on the same row. I tried using different IDs for the larger image, but that did not solve the issue.

https://i.sstatic.net/x9SBs.png

htmlcsstailwind-css

Answer №1

To ensure that the images maintain their maximum size without wrapping, set their width to 100% and remove the flex-wrap property. This will allow the a elements to stay at their full size since the images are already taking up the entire width.

.workImgs {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}
.workImg {
  object-fit: cover;
  margin: 0.5rem;
  width: 100%;
  height: auto;
}
<div class="workImgs">
  <a href="#" target="_blank"><img src="https://picsum.photos/245/182" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/185/184" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/184/165" alt="" class="workImg" /></a>
</div>

Answer №2

To ensure that all three pictures are displayed next to each other in a single row, you can establish a fixed width for each image.

.workImgs {
  display: flex;
  width: 100vw;
  gap: 2px;
}

.workImgs > a {
  flex-basis: 33.33%;
}

.workImg {
  object-fit: cover;
  max-width: 100%;
  height: 150px;
  width: 100%;
}
<div class="workImgs">
  <a href="#" target="_blank"><img src="https://picsum.photos/245/182" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/185/184" alt="" class="workImg" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/184/165" alt="" class="workImg" /></a>
</div>

Answer №3

To ensure that all three images are displayed in a row, regardless of the size of the first image, you can set a specific width for each image container and then adjust the width of the images to 100% so they fit within their containers.

.displayImgs {
  display: flex;
  justify-content: center;
  width: 100%;
}

.imageContainer {
  flex: 1;
  max-width: 33.33%; /* Customize based on your needs */
  margin: 0.5rem;
}

.imageContainer img {
  width: 100%;
  height: auto;
  object-fit: cover;
}
<div class="displayImgs">
  <a href="#" target="_blank"><img src="https://picsum.photos/245/182" alt="" class="image" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/185/184" alt="" class="image" /></a>
  <a href="#" target="_blank"><img src="https://picsum.photos/184/165" alt="" class="image" /></a>
</div>

Answer №4

Your code contains multiple errors that need to be addressed. Specifically, when setting the height of your images, you should also specify their width to maintain the aspect ratio as they increase in size. This means that both the height and width will adjust accordingly.

To ensure all images stay in a single row, you can set the flex-wrap property to nowrap and avoid using margins which would affect the overall width. Placing all images within a container and applying padding or calculating the width using calc function (e.g., width: calc(33.3333% - 1rem)) are viable solutions. Just remember to reset the box-sizing to border-box in the initial solution.

<div className="image-container">
  <a href="https://github.com/aditya803/Flappy_Bird" target="_blank"><img src={FlappyBird} alt="" /></a>
  <a href="https://github.com/aditya803/flutter_firebase" target="_blank"><img src={BrewCrew} alt="" /></a>
  <a href="https://github.com/aditya803/news_app" target="_blank"><img src={NewsApp} alt="" /></a>
</div>

.image-container{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  width: 100vw;
  max-width: 100rem;    
}

.image-container img{
  object-fit: cover;
  margin: 0.5rem;
  width: 100%;
  /* or */  
  /* width: calc(100% - 1rem)  */

  /* to keep all images ratio same */
  aspect-ratio: 16/9;
}

Answer №5

Consider removing the flex-wrap: wrap; property from the .workImgs selector This will display the images in a single row

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

What is the best way to manipulate the size and orientation of an image upon hovering over

I'm struggling to figure out how to simultaneously rotate and scale a .png file when the user hovers over it. Currently, it only scales when I hover on the picture. I understand that the scale property overwrites the first transform but I can't s ...

htmlcssrotationhoverscale

Implementing Conditional Display of Span Tags in React Based on Timer Duration

In my current React project, I am facing an issue with displaying a span tag based on a boolean value. I need assistance in figuring out how to pass a value that can switch between true and false to show or hide the span tag. I tried two different methods ...

javascripthtmlreactjs

CSS universal selector not applying to images

I have scoured through different resources and they all seem to echo the same information. Here is the code in question: *:not(img) { display: none; } Its intended purpose is to hide everything on the page except images. However, it seems to be hiding t ...

htmlcssimage

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

I am having a slight issue with my dropdown button where I am trying to display the selected item as the value of the dropdown button. The Flag Icon and Text should be changing dynamically. I have tried some examples but it seems that it is not working as ...

javascripthtmljquerybootstrap-5

Customize the color when clicking on a mat-slide-toggle

Whenever I click on the element, a shadow appears in the color that corresponds to the element, which is currently yellow https://i.sstatic.net/21BR4.png I would like to change that shadow to be green instead, but I am unsure of how to do so. Here is my ...

htmlcssangularcolorsangular-material

Discussing a non-existent web address

Is it possible to generate a URL that appears to exist but actually doesn't? Take, for example, https://twitter.com/i/notifications - this link functions as expected. However, if you delete the /notifications segment from the URL, you end up with http ...

phphtml.htaccessurlrequest-uri

What could be the reason for the improper display of this?

I am in the process of creating an e-commerce website where users can add products to their virtual shopping carts. However, I am facing an issue with displaying the correct button ('Add to Cart' or 'Remove from Cart') based on whether ...

pythonhtmldjango

What is the best way to eliminate the space between columns?

I have a simple structure on BootStrap. <div class="container"> <div class="row"> <div class="col-md-4 blue-section" ><p>Some content</p></div> <div class="col-md-4 red-section"><p>Some content&l ...

csstwitter-bootstrap

Position the button at the corner of the textarea

How can I position two buttons below a text_area, aligned with the bottom right corner of the text area? Here is what I have tried so far: https://i.sstatic.net/UcD2F.png Current code snippet: form with modal <%= form_for @note, :url => registrant ...

htmlcssruby-on-rails

Showcasing a checkbox with the chosen item marked as selected

My goal is to allow users to select hobbies from a checklist provided. The chosen hobbies should then be added to the user table. I want the checkboxes to display the user's current hobbies - checked if selected, unchecked if not. Users should be able ...

pythonhtmlgoogle-app-engine

The content at the center of the page is shifting to the right side when the browser is resized

I am currently working on creating a random quote generator at the following link: http://codepen.io/Kestvir/pen/peqjZZ. During the html/css aspect of the project, I have run into an issue with the content inside a transparent background. Whenever I resi ...

htmlcsstwitter-bootstrap

Forecast the width of an element using JavaScript

Is there a way to display tab elements on a webpage without them automatically wrapping into a new row if there are too many? Instead, I would like an arrow icon to appear at the end of the tabs so users can cycle between tab groups. The challenge is that ...

javascripthtmlcss

What is the best way to maintain the same height for a textarea and input fields?

What is the best way to align the message input field with the name and phone input fields? I need the height of the message input field to match the combined height of the three inputs on the left. It's crucial that the borders line up perfectly. I ...

htmlcsstwitter-bootstrap

Is it possible for me to reply to packets that are transmitted to a website?

I'm currently working on a Python program that sends a 'hello' packet to the server and I'm wondering if I can get the server to respond based on that. Here's the code snippet I'm using to send the packet: import requests hL = ...

javascriptpythonhtmlpython-3.x

How can a single item be selected from a multi-select drop-down menu using Python Selenium?

In the web page, there is a button labeled [Add Field] which, when clicked, reveals a drop-down menu. The xpath for this drop-down menu is: '//*[@id="adv_options[3][]' The second array item is empty as shown here: '[]'. I have manag ...

pythonhtmlformsseleniumxpath

What is the reason behind div elements shifting when hovering over a particular element?

Currently, I have floated all my div elements (icons) to the left and margin-lefted them to create space in between. I've displayed them inline as well. However, when I hover over one element (icon), the rest of the elements move. Can you please help ...

javascriptjqueryhtmlcss

Adding a .PHP File to Two Separate DIVs

I am using wordpress to create a custom theme. I'm interested in placing all the content from my slider.php file inside a div box on my index.php page. How would I go about doing this? SLIDER.PHP <div class="slider"> // All the image tags wit ...

javascriptphpjqueryhtmlcss

The textbox is unable to receive input from the pop-up window

Whenever I click on a text-box, a popup window opens up. However, the value is not inserted in the text-box when I select any radio option in the popup. Can you identify where the problem lies? Here's the text-box: <tr><td> Work </td& ...

phphtml

Having trouble retrieving the text of an element using Selenium

Looking at the DOM element provided: <span class="styles__Content-rlm06o-1 ixoRjG">20.00000000</span> I am attempting to extract the value 20.00000000 using the following Python code: text = driver.find_elements_by_xpath("//*[@c ...

pythoncssseleniumselenium-webdriverxpath

How to make an entire video clickable on Android for seamless playback?

I have implemented an HTML5 video in my mobile web application. Currently, users need to click the small play icon at the bottom left of the video to start playing it. Is there a way to make the entire video clickable so it plays when clicked anywhere on t ...

javascriptjqueryhtmlvideomobile