Three responsive images neatly arranged within separate div containers

Looking to have these 3 divs align horizontally with responsive images. Having trouble maintaining the layout when setting max-width. Any suggestions?

.fl {
  display: flex;
  flex-wrap: no-wrap;
  height: 35%;
  flex-direction: row;
}

.pic {
  width: 34%;
}

.caro {
  /* border: 2px solid black; */
  height: 100%;
  width: 100%;
  display: block;
  /* z-index: ; */
}

.caro img {
  height: 100%;
  width: 100%;
  filter: brightness(0.5);
  transition: all .3s;
}

.caro img:hover {
  filter: brightness(1);
}
<div class="fl">
  <div class="pic">
    <a href="#" class="caro"><img src="https://via.placeholder.com/1920x1080.jpg" alt=""></a>
  </div>

  <div class="pic">
    <a href="#" class="caro"><img src="https://via.placeholder.com/1920x1080.jpg" alt=""></a>
  </div>

  <div class="pic">
    <a href="#" class="caro"><img src="https://via.placeholder.com/1920x1080.jpg" alt=""></a>
  </div>
</div>

htmlcss

Answer №1

Here are a couple of recommendations:

  1. Instead of setting the width to 102% (3*34=), consider using calc(100% / 3) to get a third.

  2. To ensure images fit properly, utilize object-fit: cover. This is especially useful when dealing with images of varying sizes that need scaling.

  3. Avoid using all for transitions as it can lead to janky animations. Specify which properties to animate for smoother and more understandable code.

When using percentages for height, keep in mind that it doesn't automatically adjust to the parent's height. As an alternative, consider using vh (viewport height).

body {
  margin: 0px;
  min-height: 100vh;
}

.fl {
  display: flex;
  flex-wrap: no-wrap;
  height: 100vh;
  max-height: 35vh;
}

.fl > .pic {
  flex-basis: calc(100% / 3);
}

.caro img {
  height: 100%;
  width: 100%;
  object-fit: cover;

  filter: brightness(0.5);
  transition: filter .3s;
}

.caro img:hover {
  filter: brightness(1);
}
<div class="fl">
  <div class="pic">
    <a href="#" class="caro"><img src="https://picsum.photos/100/300"></a>
  </div>
  <div class="pic">
    <a href="#" class="caro"><img src="https://picsum.photos/50/80.jpg" alt=""></a>
  </div>
  <div class="pic">
    <a href="#" class="caro"><img src="https://picsum.photos/100/100" alt=""></a>
  </div>

</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 JavaScript to alter CSS styles with dashes

Currently, I'm delving into the world of manipulating CSS using JavaScript: img.style.borderRadius = "100%"; img.style.border = "9px solid #ffffff"; img.style.boxShadow = "0 0 5px #00000070"; img.style.margin = "20px"; I'm wondering how to chan ...

javascriptcss

Once the PHP page loads, it becomes challenging for me to dynamically change values in JavaScript

Within my code snippet below, I am aiming to modify the initial value using a slider. The slider appears to be functioning correctly; however, it is not updating the values of timeout as indicated beneath the line $('ul.<?php echo $this->session ...

javascriptphpjqueryhtml

What is the functionality behind a free hosting website?

Is anyone familiar with websites like Hostinghood, where users can create a subdomain and upload HTML, CSS, etc.? I'm curious about how they operate and how I can create a similar site. This is my first question here, so please respond instead of disl ...

javascriptphphtmlcssasp-classic

What is the best way to maintain consistent scaling for elements of varying widths and heights?

I'm searching for a method to evenly scale my elements regardless of their width and height. I don't want them to be proportional to their size. Check out the JSFiddle version body, html { height: 100%; width: 100%; margin: 0; backgro ...

csssassscale

Can a stack method be utilized to create a HTML tag checker?

I've been developing a project to create an HTML validation tool based on stacks, but I've encountered some issues. The main objective is to verify if the HTML tags are correctly nested and closed. However, there seem to be discrepancies in the r ...

htmlcalgorithmdata-structuresstack

Creating a vertical scrollable container that spans the full height of the PDF document

I am currently working on embedding a PDF file into my website. I'm trying to hide the status bar, including download buttons and page numbers, through some clever techniques so that I can control them externally. My goal is to be able to redirect use ...

htmlcssreactjspdf

Issue with rendering <li> elements in Firefox browser detected

I have been working on a website and encountered an issue with the display of list elements in Firefox. The list is not showing consistently in Firefox, but it appears fine in IE, Opera, and Safari. I have attached an image below showing the difference bet ...

htmlcssfirefoxhtml-lists

HTML string decoded incorrectly in CodeIgniter due to encoding error

When I send data that includes an HTML string along with other information from JavaScript to the PHP (Codeigniter) server using AJAX and JSON, I notice that the style information within the HTML string is missing once it reaches the server. Everything els ...

javascriptphphtmlajaxcodeigniter

Utilize jQuery to enclose nested elements within a parent element

There is a Markup presented below, where this HTML content is being generated from Joomla CMS. I am seeking a jQuery method to reorganize this HTML structure without modifying its PHP code. <div class="item column-1"> <div class="page-header"& ...

javascripthtmljquery

Save the Selenium HTML source code into an HTMLDocument element

Is there a way to save the HTML code fetched using Selenium (via Excel VBA) into an HTMLDocument element? The following example demonstrates utilizing Microsoft Internet Controls and Microsoft HTML Object Library for automating Internet Explorer. Dim IE ...

htmlvbaexcelseleniumxhtml

Is it possible to enable tooltips to function through the innerHTML method?

Currently, I am utilizing the innerHTML attribute to modify the inner HTML of a tag. In this instance, it involves the <td></td> tag, but it could be applied to any tag: <td *matCellDef="let order" mat-cell [innerHTML]="order. ...

javascripthtmlangulartypescript

Working with double quotes within variable in JavaScript

I am currently working on dynamically creating HTML tags using JavaScript. Please take a look at the code snippet below: function getPhotosSuccess(data) { if (data.d.results.length > 0) { var response = data.d.results; var innerht ...

javascripthtml

Is there a way to set the background of a HTML5 page as an image with a clickable link?

Lately, I've been working on a webpage dedicated to educating people about Mars. I wanted to spice things up by using an image as the background for my HTML5 page instead of the usual plain white color. However, just inserting a .jpg link didn't ...

htmlcssimageurlbackground

An issue encountered while employing the mix function in LESS within a Rails environment

Applying the less-rails gem. Implementing this code snippet to blend two colors: @base: #ffdc52; @add: #195742; .colour{ color: mix(@base, @add); } Encountering the subsequent error message: Less::ParseError: error evaluating function `mix`: Cannot ...

ruby-on-railscsslessparse-errorless-rails

The JavaScript program for the shopping list is experiencing issues with the formatting of list items

I have been working on developing a shopping list program using JavaScript. The program includes an input box and an "add item" button, which adds the text entered in the input field to an unordered list as a list item. Each list item also contains an imag ...

javascripthtmlcssimagehtml-lists

Concealing website links in the browser's address bar

Running my own website on a personal server with Ubuntu server, I noticed that my public IP address is displayed in the status bar when visitors browse my site or hover over links. Even after purchasing a domain name from godaddy, I couldn't find an o ...

phpjavascripthtmlubuntu-serverurl-masking

Creating a custom styled Drawer with flexbox styling using ReactJS, MUIv5, and the styled-engine-sc library

Hello community, I am currently working on implementing a custom styled drawer within a flexbox container using the styled-engine-sc. I started with a template and tried to convert it into styled-components. Here is the source: https://codesandbox.io/s/vm ...

cssreactjsmaterial-uistyled-components

Designing numerous vertical lists in HTML

I need help with displaying multiple lists vertically using HTML For example: +--------+---------------------------------------------+--+ | Global | Region Country Currency Account Type Entity | | +--------+---------------------------------------------+ ...

htmlcss

Unable to calculate height properly when using the formula height: 70% + 0px

My attempt to set the height of a div element to 70% using CSS3's calc() function has been unsuccessful. While specifying viewport height (70vh) works, I specifically need the height to be 70%. .scroll-inner-container { height: -moz-calc(70vh + 0 ...

jqueryhtmlcsscss-selectors

Tips on sending multiple values to AngularJS Directive

Currently, I am in the process of creating a simple AngularJS directive. As I am still very new to AngularJS, I would appreciate it if the answers provided could be simplified! The directive I am working on is essentially a combobox. For those unfamiliar ...

javascripthtmlangularjscombobox