How can I ensure that images appear consistent across Chrome and Firefox when using a flex-box layout?

The goal I am aiming for: https://i.sstatic.net/OhkSh.png

The appearance varies in Chrome. I attempted to include flex: 0 0 for images, but it seems that their size cannot be controlled. Is there a way to achieve the Firefox look without using div wrappers for images or specifying image sizes?

div {
  display: flex;
  gap: 5vw;
}

img {
  width: 100%;
  height: auto;
}
<div>
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
  <img src="https://place-hold.it/1280x1024" alt="">
</div>

Check out the jsfiddle here: https://jsfiddle.net/ogbva8n5/

UPDATE: It appears that when I assign a specific pixel width to the images, they behave as expected. Could this be a bug in Chrome?

htmlcssgoogle-chromefirefoxflexbox

Answer №1

To achieve this, simply hide the overflow:

div {
  display: flex;
  flex-wrap: nowrap;
  gap: 5vw;
}

div > img {
overflow: hidden;
}
<div>
  <img src="https://placeholder.com/1280x1024" alt="">
  <img src="https://placeholder.com/1280x1024" alt="">
  <img src="https://placeholder.com/1280x1024" alt="">
</div>

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

Using BeautifulSoup to locate unapproved HTML labels/attributes

At my workplace, we make use of custom tags that we have created. One of these tags is called can-edit and it is formatted like this in our code snippet: <h1 can-edit="banner top text" class="mainText">some text</h1> <h2 can-edit="banner bo ...

pythonhtmlbeautifulsoup

Creating dropdown options within a DataGrid in Form.IO: A step-by-step guide

I'm currently working with the Form.IO JS library to develop a new form. Within this form, I need to include a DataGrid containing 11 components. To ensure all components fit inline, I have applied the CSS rule overflow: auto (overflow-x: auto; overfl ...

javascriptjquerycssformio

What is the best way to reduce the height of the navbar in Bootstrap 4?

Check out my code snippet for implementing Bootstrap 4: <nav class="navbar navbar-collapse navbar-toggleable-md navbar-light bg-faded "> <div class="collapse navbar-collapse" id="navbarText"> <ul class="navbar-nav mr-auto"> ...

cssbootstrap-4twitter-bootstrap-4

Prevent tab navigation from extending beyond a specific button by staying focused on that button

Imagine a situation where I have a sequence of buttons named btn1, btn2, btn3, and so on... As I continuously press the 'tab' key, my focus lands on btn2. Now, I want to prevent btn3 or any button beyond that from receiving focus when the tab ke ...

javascripthtml

Assign a distinct color to each character of the Russian alphabet within a specified text using CSS and/or JavaScript

My experiment involves testing the concept of "induced synesthesia" by assigning different colors to individual characters in text. I plan to map each character in the Russian alphabet to a specific color, for example, A is red, B is blue, and so on, resul ...

javascripthtmlcss

Issues with Laravel 5.8 and Bootstrap not functioning properly in Jquery

Check out this link for using Bootstrap Select. The code works perfectly in the view, but when I try to implement it with jQuery below, it doesn't work. Can someone help me fix this issue? View Code: <table id="tableAppointment" style=&q ...

htmljquerycsslaraveljquery-ui

Is there a way to modify the background color of ::before when hovering over it?

I have a ul-li list and when i hover last li ::before element looks white and not so good. I want to change it when i hover the last li element. How can I achieve this? Here are my codes: <div className="dropup-content"> <ul> & ...

javascripthtmlcssreactjssass

Is it possible to create a CSS grid with a varying number of columns?

I recently set up a webpage with a CSS grid that centers the main section at 80% width. <html> .... <body> <main> <section> </section> </main> </body> .... </html> main { display: grid; j ...

htmlcssgridcss-grid

The Spring Boot REST application is unexpectedly returning HTML instead of JSON, causing confusion for the Angular application which is unable to recognize the

I am struggling with my Spring Boot application that was generated using . I am having difficulty getting it to return JSON instead of HTML. Here is a snippet of the code: [@CrossOrigin(origins="http://localhost:4200",maxAge=3600) @RestController @Request ...

htmljsonangularspring-boot

Vuetify's offset feature seems to be malfunctioning as it does not

I'm facing an issue with the <v-flex> element in my code, specifically with the offset property not responding as expected. Despite following the recommended layout from the vuetify docs, I can't seem to get it right. Below you can see the ...

htmlcssvue.jsflexboxvuetify.js

The performance of my SVG Filter is dismal

Here is the SVG filter I am using: <svg style="visibility: hidden; height: 0; width: 0;"> <filter id="rgbShift"> <feOffset in="SourceGraphic" dx="1" dy="-1" result="text1" /> <feFlood flood-color="#FF0000" result=" ...

javascriptcsssvgsvg-filters

Tips for concealing components with the assistance of Bootstrap's classes?

Currently, I am experimenting with Bootstrap to display h1 only on desktop/large screens and h2 only on mobile devices. However, despite my efforts, both h1 and h2 appear on all screen sizes. The h1 and h2 elements are input fields and the condition for t ...

htmlcssbootstrap-4

What is the most efficient way to dynamically alter the position of a div element within an HTML document using

In a scenario where a parent div contains multiple child divs, it is required that one particular child div named .div_object_last always stays at the end. Below is an example setup : HTML <div class="div_parent"> <div class="div_object"> ...

javascriptjqueryhtml

CKEditor Codesnippet's background does not scroll past the length of the <div>

Recently, I added a div to my website to contain the text within a set width. Additionally, I've integrated CKEditor5 and am utilizing its CodeSnippet plugin. An issue arises when there is excessive code on a single line, causing it to display in a sc ...

htmlcssckeditorhighlight.jsdjango-ckeditor

SVG fill with no color

Currently, I am attempting to utilize a wave SVG while also having a background image set for the body of the webpage. However, I am encountering an issue where I want the SVG to be filled with transparency so that the body background image shows through. ...

htmlcsssvg

Switch between 3 different divs by clicking on them using ng-click

I have three different anchors, and I want each one to trigger the display of a unique full-width div below it. The behavior should be similar to the way it works on the iPad example found at this site: For instance, clicking on the first anchor should op ...

javascriptjqueryhtmlcssangularjs

Allow users to select options after they click a radio button

I have a pair of radio buttons and two sets of select options within different classes. Upon selecting the first radio button, the select options belonging to class1 should be enabled. On the other hand, upon selecting the second radio button, the select ...

javascripthtml

What are some ways to position text in the center of a page without using divs?

Is there a way to center text on a page when there is a floating div affecting the alignment? I noticed that the text centers around the div instead of the entire page. How can I solve this issue? For a better understanding, please view in fullscreen mode ...

htmlcss

Play multiple videos simultaneously on a single webpage automatically

Looking to enhance my archive product page in woocommerce by adding a featured video. Encountering an issue where only one video auto plays while the others pause. When there's just one video on the page, it works flawlessly, but adding a second vide ...

javascripthtmljquerywordpresshtml5-video

what strategies can be implemented to prioritize addressing validation errors in return forms

I'm currently working on a web application in asp.net mvc-5, and I have a contact form displayed in the middle of the Contact Us view. Here's the code snippet: <div class="col-sm-8 col-sm-push-4"> <h2>Contact Us1 ...

javascriptjqueryhtmlasp.net-mvcrazor