Uniform image dimensions across varying columns

I have a layout with 4 columns, each containing an image and text. The images in each column have different heights and widths, while the text lengths also vary. I want all the images to be the same height and width proportionate to the image itself. Additionally, I aim for the text to align at the same vertical point in each column.

Desired Result: https://i.sstatic.net/twQ6F.png

Current Outcome: https://i.sstatic.net/b17sc.png

<div class="container">
    <div class="row">
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
            <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
            <p>Etiam feugiat in nulla sit amet congue. </p>
        </div>
        <div class="col text-justify">
            <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
        </div>
    </div><!-- end -row -->
</div>

Codepen: https://codepen.io/danielgetsthis/full/mXepew

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

Could you please check if this is what you were looking for? Run the snippet and let me know (it might be better to view it in fullscreen since the window here is quite small)

.img-fluid{
  width: 75%; 
  min-height: 50px;
  margin: auto;
  margin-bottom: 10px;
  display: block;  
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
<div class="row">
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x80">
    <p>In hac habitasse platea dictumst. Etiam feugiat orci non placerat egestas. Suspendisse a lacinia nisl. Sed nec lorem at mauris eleifend sagittis. Etiam pulvinar, ante in viverra semper, tortor risus elementum arcu, nec hendrerit magna ex eu turpis. Nulla pretium posuere tortor, in tincidunt odio rhoncus et. Vivamus molestie nulla non metus sodales feugiat. Duis rhoncus ullamcorper iaculis. Donec ut ullamcorper quam, at vestibulum mauris.</p>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/500x80">
    <p>Etiam feugiat in nulla sit amet congue. </p>
  </div>
  <div class="col text-justify">
    <img class="img-fluid mx-auto d-block" src="http://via.placeholder.com/350x150">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam odio ipsum, lobortis eu neque id, pharetra tempus lorem. Nulla a dui ornare, facilisis augue eu, blandit massa. Praesent eget congue est. Integer ut pulvinar eros. </p>
  </div>
</div><!-- end -row -->
  </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

What is the best way to vertically align text that is positioned absolutely in the center?

I'm looking to implement a hover hide effect. Check out my inspiration on CodePen * { box-sizing: border-box; margin: 0; padding: 0; } body { background-color: #123456; } #object { background-color: cornsilk; border: #333 3px solid; ...

htmlcss

What is the best way for Selenium in C# to identify and locate a specific span element by its value

I've been experimenting with different locators, but I'm struggling to find a straightforward solution for identifying the dynamic number within this span using C# Selenium. Initially, my focus is just on locating the span itself. <span inven ...

c#cssseleniumcss-selectorsui-automation

Appear and disappear gradually when hovering

When hovering over #one, the class .hidden is applied to #first. I have added a script to make .hidden fade out using transition: ease-in 0.3s;, but I am having trouble getting the fade in effect to work. I attempted adding transition: ease-in 0.3s; to #fi ...

jquerycss

When the width of the screen is less than 992 pixels, my div will be hidden

I have been working with the bootstrap4 layout, and I noticed that when the screen width is less than 992px, the yellow-div is overlapping the brown-div. Can someone explain why this is happening and suggest a solution? Below is the code snippet: .head ...

htmlcssresponsive-designbootstrap-4

Different results are being obtained when destructuring props in a component

Just diving into the world of React and trying to grasp destructuring. I've been doing some reading on it, but I'm currently stuck. When I try to destructure like this function MList({action}) { // const data = [action];}, I only get 'camera ...

javascripthtmlreactjstypescriptreact-hooks

Setting the width of an SVG element to match the width of the <text> element inside it

Within this JSFiddle project - https://jsfiddle.net/xtxd6r8t/ - there is an <svg> element containing text inside a <text> tag. Upon inspection of the <svg> and delving into the <text> element, it's noticeable that the width of ...

htmlcsssvg

The CSS animation is functioning smoothly in Chrome, but unfortunately, it is not working in Firefox

I'm having trouble with my animation not working in Firefox and Safari, even though it works fine in Chrome. I've tried using the -Moz- and -WebKit- vendor prefixes, but it seems that Firefox and Safari already support the animation. CSS: .vi ...

htmlcssfirefoxsafari

Tips for structuring a webpage section on a smaller screen using Bootstrap

Good day, I am inquiring about how to adjust the formatting of a website element when viewed on a different browser size. For instance, this is what my top navigation bar looks like at the LG size: Nav LG However, when I switch to SM size, it appears u ...

htmlcsstwitter-bootstrap-3

Placing a div in the corner of an image

Is there a way to position a meta-data div in the corner of every post image, even with different image sizes? For example: This is what I currently have in my loop: <div id="images"> <?php wp_get_attachment_image(); ?> </div> < ...

phpcssimagehtmlpositioning

What is the best way to showcase HTML content in columns with a horizontal scrolling feature?

I am trying to showcase a list of basic HTML elements such as divs, paragraphs, etc. within a fixed height container, arranged in columns with consistent width. I want them to be horizontally scrollable, similar to the layout displayed in this image. Thi ...

csshtmlscrollinternet-explorer-11

Ensuring flexibility in video display when resizing the browser

I am facing an issue with the main video on my website, where it shows a green background when resized. I suspect that the problem lies in the aspect ratio of the video. However, my main question is: Is it possible to make the height of the video responsiv ...

htmlcsstwitter-bootstrapresponsive

Is there a way to utilize HTML and CSS to position checkboxes in front of text questions?

I need help with organizing checkboxes and labels in my webform. Currently, the checkboxes are appearing after the label text, causing them to be misaligned. How can I ensure that the checkboxes appear before the corresponding text? <label for="needs ...

htmlcsscheckbox

Definition list with alternating left and right alignments

Here is a definition list with a specific styling: dl { margin: 0; } dl.interview dt { color: #A8A67A; } dl.interview dd { margin-left: 0; } .interview dt:before { content: 'Q. '; } .interview dd:before { content: 'A. ...

csshtml-lists

In Laravel Blade, the modal content is obstructed by the Modal Backdrop on portrait screen orientation

Within my Laravel Blade, I encounter an issue where a modal pops up in portrait orientation on an iPad Pro, but is obstructed by the backdrop div. The message prompts the user to rotate the screen to landscape mode. However, the modal works perfectly in la ...

javascripthtmlcssbootstrap-4laravel-blade

Display the value of my JavaScript variable within a div element

I am having trouble displaying the JavaScript variable "dayz" in the results div. When I try to use alert(dayz) after the calculation, it works fine, but I need it to output the dayz variable in the HTML. Can anyone help me with this issue? <html> ...

javascripthtml

Challenges with text in a Bootstrap 5 responsive carousel

I'm currently in the process of developing a new website and I am utilizing bootstrap 5. One issue I have encountered is that the text and button within the carousel in the header section do not appear to be compatible. To provide better clarity, I wi ...

htmlcsscarouselbootstrap-5

After the final breakpoint is reached in Firefox, min-width for Bootstrap 4 element increases to over 17 million pixels

When implementing my Magento 2 theme, I encountered an unusual bug while using Bootstrap 4. If I adjust the device width to 575, certain elements on the page inexplicably expand to almost 20 million pixels in width. Interestingly, this issue only arises i ...

cssfirefoxsassbootstrap-4magento2

What is the most effective method to override parent styles while utilizing CSS Modules?

I'm currently using NextJS along with CSS Modules for styling purposes. One of my goals is to adjust the appearance of a component in different scenarios: When it's rendered normally on a page, utilizing props to specify className modifiers. W ...

cssreactjsnext.jscss-modules

Enhance Your CSS Abilities with These Helpful Guides

Over the past month, I've immersed myself in learning CSS. My journey began with devouring all the information I could find on www.w3school.com, followed by delving into CSS Mastery 2nd edition. While I have successfully built a couple of websites, I ...

css

jquery conflict between parent div hover function and child's hover function

I am experiencing an issue with a hover function on a parent element and child event. It seems that the child hover function is not working when hovering over the parent. Specifically, I have set up a hover function on both the "univ" div and the "heading ...

javascriptjqueryhtml