Images of equal height without compromising the resolution

How can I create responsive images with the same height inside a DIV tag, with a specified height of 200px? Any assistance would be greatly appreciated.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="description" content="Creating CSS aspect ratio for images of uniform height">
  <!-- include bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="col-sm-12" id="lift">
  <div class="row">
    <div class="col-sm-12 col-md-3 ">
       <a class="link-block" href=""> <img class="img-responsive" src="https://images-na.ssl-images-amazon.com/images/G/01/img15/pet-products/small-tiles/23695_pets_vertical_store_dogs_small_tile_8._CB312176604_.jpg"> </a>
       <p class="lift-title">Text 1</p>
    </div>
    <div class="col-sm-12 col-md-3 ">
        <a class="link-block" href=""> <img class="img-responsive" src="https://www.cesarsway.com/sites/newcesarsway/files/styles/large_article_preview/public/Common-dog-behaviors-explained.jpg?itok=FSzwbBoi"> </a>
        <p class="lift-title">Text 2</p>
    </div>
    <div class="col-sm-12 col-md-3 ">
        <a class="link-block" href=""> <img class="img-responsive" src="https://i.ytimg.com/vi/opKg3fyqWt4/hqdefault.jpg"> </a>
        <p class="lift-title">Text 3</p>
    </div>                     
  </div>
</div>
</body>
</html>

htmlcss

Answer №1

If you want a quick solution, you can set the height of the image to be 200px and let the width adjust automatically.

img{
     height : 200px;
     width : auto;
}

However, this method may impact the responsiveness of your design. In that case, consider using flex.

For example:

.flex{
    display:flex;
}

Add the class flex to your row element. This will ensure all the cols have equal height, allowing you to set the image's height to be 200px with an automatic width adjustment. By doing so, you maintain the aspect ratio and resolution of the images while preserving responsiveness. You can combine this approach with Bootstrap's col classes for added flexibility.

Answer №2

Kindly update the width of .col-sm-12 to something other than 100%

Below is the recommended CSS code for images:

.img-responsive{
  display: block;
  max-width: 100%;
  height: 200px;
}

This adjustment will ensure consistent image heights and responsiveness throughout the website.

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

Troubleshooting: Why the TableTools basic usage example is not functioning as

After replicating the code from http://datatables.net/release-datatables/extensions/TableTools/examples/simple.html in my Visual Studio project, I organized the files by saving two css files as style1.css and style2.css, along with three js files named sc ...

javascripthtmlcsstabletools

Floating color problem

Do you know why the social icons turn black when hovered over? Could it be related to the navbar buttons? Is there a way to change the hover color to blue or red only? Link to code snippet <body> <nav class="navbar navbar-default navbar-fixed-t ...

htmlcsstwitter-bootstrap-3

When words are enclosed in a table cell, the fixed table layout ensures that all columns are the same size

There are times when long words in my HTML table cells need to be broken if they overflow their designated area. To learn how to break table cell words, check out this question: Word-wrap in an HTML table The recommended CSS style is: style="word-wrap: ...

htmlcss

Trouble with Div Display

I have a section below my form that will show an alert message if there is an error. The issue I am facing is that if I use the inline-block property, everything within the section will be displayed in the alert color. I specifically want the background- ...

htmlcss

Is it possible to run a Universal Windows Platform desktop app on an Android mobile device?

After successfully developing a Universal Windows Platform app in Visual Studio using WinJS, JavaScript, CSS and HTML, I am now interested in leveraging the same code base to create an Android application. Could you guide me on the necessary steps to run ...

javascriptandroidhtmlcsswinjs

JavaScript confirmation for PHP delete button

Is there a way to implement a JavaScript alert that prompts the user to confirm their action when they click the delete button? I attempted to integrate a class into an alert box: <?php //$con = mysqli_connect("localhost", "root", "root", "db"); $sql ...

javascriptphphtmlalert

Attempting to upload a file into the system

I'm in the process of creating a website that allows for file uploading. Check out my code below: index.php: <?php include('/inc/header.php'); ?> <?php if($_SESSION['username'] != null) { echo " <form class=&bs ...

phphtml

Several features - Second function malfunctioning

The initial inquiry is effective. However, the subsequent one is encountering issues as it is failing to confirm if an email contains the "@" symbol. My attempted solution involved reordering the functions related to email validation. <body onload="ch ...

javascripthtml

Within jQuery lies the power to perform multiplication operations effortlessly

I'd like to accomplish this using jQuery: var menuItems = document.getElementsByTagName("li"); for (var k = 0; k < menuItems.length; k++) { if (menuItems[k].className == "menu") { var child = menuItems[k].firstChild; if ...

javascriptjqueryhtml

Displaying checkbox values with JavaScript

How can I display multiple checkbox values when checked in HTML code? Whenever I check a checkbox, I want its value to be shown alongside the previously checked values. Right now, my code only displays one value at a time. Any suggestions on how to achie ...

javascriptjqueryhtml

Sustaining the hover effect background color when hovering over submenu options

I am currently working on a navigation menu that includes list items a, b, c, d, e, f. One issue I am facing is when a user hovers over the list item d, the submenu items like d1, d2, d3, d4, and d5 appear within the d section. However, the background col ...

htmlcsstwitter-bootstrap

Having trouble with Flowbite dropdown functionality in Next.js 12.* with Tailwind CSS

Hello, I am a newcomer to Next.js and currently working on a project using Tailwind/Flowbite. I copied and pasted the Flowbite search input with dropdown code from , but unfortunately, the dropdown is not functioning as expected. I have followed the docum ...

cssnext.jsdrop-down-menutailwind-cssflowbite

Show a preview of an image in an HTML document

How can I display an image after uploading it? I attempted to use the following code, but it didn't work: onFileSuccess: function(file, response) { var json = new Hash(JSON.decode(response, true) || {}); if (json.get('status& ...

phpjqueryhtmljsonajax

Utilizing Various jQuery Selectors for Option Values

I'm currently facing a challenge with including extra value selectors in jQuery. My goal is to include option[value="18:00"] so that if option [value="17:00"] is not chosen, it will trigger the function when 18 is selected. Below is the code snippet: ...

jqueryhtml

Issue with nextElementSibling not applying CSS style

My current issue revolves around a button that is designed to open or close a collapsible div. The HTML structure of this element looks like the following: <div class='outer-collapsible'> <button type='button' class='col ...

javascripthtmlcss

Attempting to automate the process of clicking a button on a webpage using cefsharp

Hello, I am currently working with cefsharp and vb.net to develop a code that will help me navigate to the next page of a specific website. The website link is: https://www.recommendedagencies.com/search#{} My goal is to extract the list of company names ...

javascripthtmlcefsharp

Unexpected issue encountered for identifiers beginning with a numerical digit

Is it possible to select an element from a page with an id that begins with a number? $('#3|assets_main|ast_module|start-iso-date') Upon attempting to do so, the following error occurs: Uncaught Error: Syntax error, unrecognized expression: ...

javascriptjquerycss

Blog Format Featuring Side-by-Side Columns

Is there a way to achieve horizontal columns that don't cut off articles and flow seamlessly into the next column? I want the columns to have varying heights, such as Post A at 60% height, followed by Post B at 40% height, then Post C at 30%, and fina ...

htmlcss

Imitate adjustment of orientation without the need to resize the browser window

Is there a way to simulate page portrait orientation on a PC browser without resizing the window? In my HTML code, I have a <div> element that displays content dynamically based on screen orientation. Is it possible to use JavaScript to trick this & ...

javascripthtmlcss

Preserve the iframe src value in the dropdown menu even after the page is refreshed

I am trying to figure out how to prevent the iframe src from changing when I refresh the page, unless the user manually changes it using the dropdown menu with JavaScript. Can someone help me with this? <div class="row"> <div class="span9"> ...

javascriptjqueryhtmliframe