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

Implementing raw static HTML files in webpack: a step-by-step guide

Recently, I created a basic template called test.html <div>raw text with content</div> All I'm trying to achieve is to import the raw file without any alterations For example: require('./test.html'); // This should return "&l ...

javascripthtmlnode.jsnpmwebpack

Why isn't margin working with position: fixed?

I need help finding a solution for incorporating margin in a box within my App class. The issue is that the position fixed property doesn't seem to work as intended. <div className="App"> <div className="box"> ...

htmlcss

JQuery ID Media Queries: Enhancing responsive design with targeted

Is it possible to integrate a media query into the selection of an ID using JQuery? For example: $('#idname') $('@media (max-width: 767px) { #idname }') In essence, can you target the #idname with that specified media query in JQuery ...

javascriptjquerycss

In Internet Explorer versions 7 and 8, a transparent overlay div enables click-through functionality

I am facing an issue with a div containing form elements and an invisible overlay mask. When using IE 7 and 8, the click goes through the overlay without background which is incorrect. To solve this problem, I added a background color to the overlay div w ...

jquerycssinternet-explorer-8internet-explorer-7overlay

linking to a page that shows the user's chosen option from a dropdown menu

One of the challenges I encountered was creating a feature that allows users to share a specific selection from multiple dropdown lists on a page. Essentially, my goal was to enable users to send a link that would direct others to the same page with the ex ...

javascriptjqueryhtml

Combining selected boxes through merging

Looking to create a simple webpage with the following requirements: There should be 10 rows and 3 boxes in each row. If I select 2 or more boxes or drag a box, they should merge together. For example, if my initial screen looks like this: and then I se ...

javascriptjquerycssjquery-uijquery-ui-selectable

Stop the page from scrolling

I'm trying to find a way to disable page scrolling, so I used this style for the body: overflow: hidden; Surprisingly, it worked perfectly on desktop but had no effect on mobile devices. After checking out this resource, it seems that creating a ch ...

htmlcss

What is the best way to format these div elements in order to create a functional comment section?

For the past few hours, I've been struggling to figure out what’s causing issues with the styling on my webpage. The layout should display a user post on one side and a comment-section along with the comment form on the other. Within the PostComment ...

phpcss

Why does Internet Explorer display .png images in lower quality compared to other browsers?

My menu displays a .png file with smooth edges in most browsers, but in Internet Explorer it appears with rough edges. Can someone help me understand why IE treats .png files differently compared to other browsers? <li> <a href="" onclick=" ...

htmlcssinternet-explorer

Having trouble understanding how to create a continuous loop for a CSS animation within the KreatureMedia Layerslider

Currently, I am using KreatureMedias Layerslider and trying to make a fullwidth wave bob up and down. This is what I have at the moment... <img class="ls-layer" data-ls="durationin:1500;scalein:1.1;offsetxin:-50;loopcount:-1;loopoffsetx:0sw;loopoffset ...

jqueryhtmlcssanimationplugins

How can you enable fullscreen for a featherlight iFrame?

I have implemented Featherlight to display an iframe within a popup modal on my website. If you click the iframe button, you can see a demo of how it works. One issue I am facing is that the generated iframe tag by Featherlight does not include allowfulls ...

javascriptjqueryhtmliframe

What is the best way to extract content between <span> and the following <p> tag?

I am currently working on scraping information from a webpage using Selenium. I am looking to extract the id value (text) from the <span id='text'> tag, as well as extract the <p> element within the same div. This is what my attempt ...

pythonhtmlseleniumweb-scrapingbeautifulsoup

Having difficulty aligning the container div in the center

I'm trying to create a centered grid of full-width buttons, but for some reason, I just can't seem to get the container centered. Any suggestions? Check out the code here - https://jsfiddle.net/a6qo6tzL/ Thank you! <div class="Wrapper"> ...

htmlcsscentering

create a division in the organization of the identification numbers

Is there a way to always change pages when the id changes in a foreach loop to separate the printed pages? Take a look at this code snippet: var data = [ {Id: "552", valor: "50.00", Descricao: "Fraldas", }, {Id: "552", valor: "35.00", Descrica ...

javascripthtmlcss

Adjust the height of a division dynamically

I have the following HTML snippet: <div id="container"> <div id="feedbackBox"></div> </div> The #feedbackBox div is initially not visible. To center the div, the CSS code is used: #container { position: absolute; widt ...

jqueryhtmlcssresize

Tips for redirecting to the index page instead of the login form after pressing the back button on the navigation

Hey everyone! I've been struggling with a problem for the past 4 hours and could really use some help. After logging in, the page redirects to a certain page, but when I press the back button in my browser, I want it to redirect back to that specific ...

phphtml

A newline within the source code that does not display as a space when rendered

Written in Chinese, I have a lengthy paragraph that lacks spaces as the language's punctuation automatically creates spacing. The issue arises when inputting this paragraph into VSCode - there's no seamless way to incorporate line breaks in the s ...

htmlcss

What causes variations in the output of getClientRects() for identical code snippets?

Here is the code snippet provided. If you click on "Run code snippet" button, you will see the output: 1 - p.getClientRects().length 2 - span.getClientRects().length However, if you expand the snippet first and then run it, you will notice a slight dif ...

javascripthtmlcss

Looking to pass two distinct variables using a single props with v-if in Vue-JS. Any suggestions?

I am attempting to pass different data to my other component. Essentially, when my variable firstvalue is not null, I want to send firstvalue. Currently, this setup is functioning as expected. However, I now wish to send secondvalue if it is not null. < ...

javascripthtmlvue.js

Populate a database with information collected from a dynamic form submission

I recently created a dynamic form where users can add multiple fields as needed. However, I'm facing a challenge when it comes to saving this data into the database. You can view a similar code snippet for my form here. <form id="addFields" me ...

javascriptphpjqueryhtmlforms