Setting the width to auto, height to 100, and using overflow hidden does not produce the desired result

In my design, I have two sets of images displayed below:

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

Both sets of images have the exact same code. The only difference between the images in the first and second set is their dimensions.

I aim to make all image blocks appear the same height and width, regardless of the image dimensions. I also want the image width to be 100% of the available width, with the height set to auto. If the image's height exceeds its parent's height, I want the excess part of the image to be hidden.

Below is the HTML code snippet:

<div class="container-fluid">
<div class="row top-row">

    <div class="col-md-2">

        <div class="col-md-12 menu-top-wrapper">
            <img src="https://lorempixel.com/900/500?r=1" class="menu-top-img" />
        </div>
        <div class="col-md-6 menu-left-wrapper">
            <img src="https://lorempixel.com/900/500?r=2" class="menu-left-img" />            
        </div>
        <div class="col-md-6  menu-right-wrapper">
            <img src="https://lorempixel.com/900/500?r=3" class="menu-right-img" />          
        </div>

    </div>

    <div class="col-md-2">

        <div class="col-md-12 menu-top-wrapper">
            <img src="https://lorempixel.com/500/900?r=1" class="menu-top-img" />
        </div>
        <div class="col-md-6 menu-left-wrapper">
            <img src="https://lorempixel.com/500/900?r=2" class="menu-left-img" />            
        </div>
        <div class="col-md-6  menu-right-wrapper">
            <img src="https://lorempixel.com/500/900?r=3" class="menu-right-img" />          
        </div>

    </div>

</div>

</div>

Take a look at the CSS styling:

.menu-left-wrapper {
    margin-top: 2px;
    padding-right: 2px;
}

.menu-right-wrapper {
    margin-top: 2px;
    padding-left: 2px;
}

.menu-top-img {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.menu-left-img {
    border-bottom-left-radius: 10px;
}

.menu-right-img {
    border-bottom-right-radius: 10px;
}

.img-top-wrapper,
.img-left-wrapper,
.img-right-wrapper {
    position: relative;
    width: auto;
    height: 100px;
    overflow: hidden;
}

.menu-top-img,
.menu-left-img,
.menu-right-img {
    position: relative;
    width: 100%;
    height: auto;
}

For a live example, see the JS Fiddle link below:

https://jsfiddle.net/Vishal1419/s9e8x0pt/

htmlcssng-bootstrap

Answer №1

Utilizing object-fit to adjust the css, here's how it's done:

When you modify the fiddle output window's height, you'll notice that the lower images resize equally in both blocks:

Image 1:https://i.sstatic.net/DeZqo.png

Image 2:https://i.sstatic.net/8hUN2.png

Check out the code in the fiddle and snippet below

.top-row {
  height: 100vh;
  max-width: 1024px;
  overflow: hidden!important;
}

.menu-left-wrapper {
  display: inline-block;
  margin-top: 2px;
  padding-right: 2px;
}

.menu-right-wrapper {
  display: inline-block;
  margin-top: 2px;
  padding-left: 2px;
}

.menu-top-img {
  display: inline-block;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.img-top-wrapper {
  position: relative;
  max-width: 100%;
  height: 100px;
}

.img-left-wrapper,
.img-right-wrapper {
  position: relative;
  width: 100%;
  height: calc(33.5vh);
  object-fit: cover;
}

.menu-top-img {
  position: relative;
  width: 100%;
  height: 100px;
  object-fit: cover;
}

.menu-left-img,
.menu-right-img {
  position: relative;
  border-bottom-right-radius: 10px!important;
  border-bottom-left-radius: 10px!important;
  width: 100%;
  height: calc(33.5vh);
  object-fit: cover;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row top-row">

    <div class="col-md-2">

      <div class="col-md-12 menu-top-wrapper">
        <img src="https://lorempixel.com/900/500?r=1" class="menu-top-img" />
      </div>
      <div class="col-md-6 menu-left-wrapper">
        <img src="https://lorempixel.com/900/500?r=2" class="menu-left-img" />
      </div>
      <div class="col-md-6  menu-right-wrapper">
        <img src="https://lorempixel.com/900/500?r=3" class="menu-right-img" />
      </div>

    </div>

    <div class="col-md-2">

      <div class="col-md-12 menu-top-wrapper">
        <img src="https://lorempixel.com/500/900?r=1" class="menu-top-img" />
      </div>
      <div class="col-md-6 menu-left-wrapper">
        <img src="https://lorempixel.com/500/900?r=2" class="menu-left-img" />
      </div>
      <div class="col-md-6  menu-right-wrapper">
        <img src="https://lorempixel.com/500/900?r=3" class="menu-right-img" />
      </div>

    </div>

  </div>

</div>

(Updated) check out the fiddle here

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

Separate your buttons with style using the Bootstrap button groups with

Is there a way to add border line separators between buttons in Bootstrap button groups? <div class="btn-group" role="group" aria-label="Button group with nested dropdown"> <button type="button" class=&quo ...

csstwitter-bootstrapbuttonbootstrap-4border

Troubleshooting problem with Laravel and Vue integration

I have experience working on a Laravel and Vue.js project. Here is the code snippet for the Laravel view: @extends('layouts/app') @section('content') <div id="app"> </div> @endsection And here is the ...

csslaravelvue.js

When clicking on an image, it triggers a unique PHP query, however the results obtained are not accurate

Greetings, I have a search feature on my website. When a user inputs a keyword and clicks the search button, it directs them to jobsearch.php which then displays a list of relevant jobs from the MySQL database. The functionality is working perfectly. Howe ...

phphtmlmysql

Adjust SVG size to fit parent container/division

I am trying to make the SVG completely fill the containing TD. I don't care about preserving the proportions of the SVG. Instead, I want the height of the SVG to be the same as its width when the height should be larger than the width. There is paddin ...

htmlcsssvg

Tips for adjusting an @media css for a material-ui react component

After posting this inquiry about overriding a CSS property in a material-ui component, I received a helpful example. However, I encountered difficulty when attempting to set the height of the Toolbar component due to an overarching @media specification. My ...

cssreactjsmaterial-ui

Issue with Jquery .scroll method not triggering display:none functionality

Styling Using CSS #acc-close-all, #to-top { position: relative; left: 951px; width: 29px; height: 42px; margin-bottom: 2px; display:none; } #acc-close-all a, #to-top a { position: absolute; float: right; display: block ...

javascriptjqueryhtmlcss

What is the best way to utilize Content-Disposition: attachment?

I am new to creating websites and I am trying to make it easier for users to download mp3's from my site by allowing them to left click instead of the traditional right click and save as method. In order to achieve this, I need to set the Content-Disp ...

phphtmlcontent-disposition

Aligning variable width numbers within a div container

Currently experimenting with CSS to create a calendar design that mimics the look of a traditional paper calendar. One issue I've encountered is the alignment of numbers within boxes, especially when dealing with double digits. When displaying a sing ...

htmlcss

Determine whether a WebElement contains a particular content within the :after pseudo class

After locating my element in Selenium, I've come across an interesting challenge. IWebElement icon = box.FindElement(By.ClassName("box-icon")); Sometimes, this element (icon) has a content set as follows: &:after { content: $icon-specia ...

javascriptjquerycssselenium

Having trouble interacting with an xpath-selected element in Selenium using Python?

I've been attempting to click on an element that I've selected using Xpath, but it appears that I am unable to locate the element. Specifically, I'm trying to click on the "Terms of Use" button on the page. The code snippet I've written ...

pythonhtmlselenium-webdriverxpathselenium-chromedriver

The back to top feature is malfunctioning when navigating to a new page

I've been working with jQuery Mobile to create some pages and wanted to add a "back to top" element. It's been functioning well, but I've encountered an issue. When I navigate from one page, let's say #sport, back to #restaurants after ...

jqueryhtmlajaxjquery-mobilescrolltop

Securing containers with CSS styling

I'm currently working on a website and I've encountered an issue with positioning. Within the content section, I have two main text boxes - one in the top left corner and one in the bottom right corner. However, when the browser window is resized ...

csspositioncss-position

Manipulating class properties in AngularJS from a controller

I won't dwell on the reason for this (it's required to override some behavior in Angular Material that is causing issues in Safari), but here is what I am attempting to accomplish: HTML: <style> .changeme{ height: 300px; } </st ...

javascriptcssangularjsangularjs-scope

Learn how to showcase a predetermined option in an HTML select element using Vue.js and Minimalect

I am currently utilizing Vue.js along with the Mininmalect HTML select plugin to showcase a list of countries by their names and values, where the value represents the 2 digit country code. Successfully, I have managed to implement the plugin for selectin ...

javascriptjqueryhtmlhtml-selectvue.js

Applying CSS selectors to target child elements within a select option

I am looking to apply a CSS selector only on select option child values. I have assigned an id to the selector and now I want to apply different CSS styles to each child (child 1, child 2, etc). <select name="options[81]" id="select_81" class="required ...

htmlcss

Question: When referencing $(this) in a different div, how can you navigate back to the previous div and access its children elements in jQuery?

Here's the code I've been working on: When a user clicks on a link with the class '.like', I want the total number of likes (found in the div.postInfo as '.PostlikeCount') to update and display the new total. $(".like").cl ...

jqueryhtmlajaxparenttraversal

Is there a way I can appropriately display an image in a specific size box?

Check out the code snippet I wrote below: import React from 'react' function OurCourse() { return ( <div className='w-full '> <div className='w-full h-[390px]' style={{ backgroundImage:&apos ...

javascriptcssreactjstailwind-css

Enhance the user experience by adding visual appeal to the first option in the selection form. Make it

Is there a way to change the color of the first option in the selection box to grey, similar to the example above? Additionally, how can I create a clickable icon that will display all options? The current setup is not functioning correctly. <div clas ...

htmlcssformsfont-awesome

Completely place one element with respect to its sibling element

I am currently facing a situation where I have implemented a Navigation bar wrapper that reveals an overlay across the entire page when clicked. In order for this setup to function correctly, all the elements that the overlay covers must be sibling elemen ...

htmlcssreactjspositionabsolute

What is the best method for directing to various pages on a GitHub Pages website?

My GitHub Pages site is live at this link. While the splash page loads perfectly, clicking on the circle to transition to the next page, 'landing.html', leads to a 404 error. I have exhausted all possible solutions to address this issue, includin ...

javascripthtmljquerygithub-pages