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

Tips on personalizing the default html template in nuxt

Struggling to customize the default page from my Nuxt app due to limited documentation. Link to Documentation I'm interested in extracting only certain elements like the title or links in the head section. For example, how can I access just the li ...

javascripthtmlvue.jsnuxt.js

Controlling Material-UI using a custom .css stylesheet

Are there alternative methods for customizing Material-UI components using CSS stylesheets? I'm aware of the {makeStyles} method and JSS overrides, but I find it messy in the code and confusing when trying to modularize it in other files. Is there a ...

javascriptcssreactjsdesign-patternsmaterial-ui

Comparing Django forms to conventional forms

As I work on my Django website, I find myself torn between utilizing Django-Forms and sticking with the traditional hand-coded HTML forms. While HTML forms offer certain benefits that align with my needs, I must admit that I have also experienced advanta ...

htmldjangodjango-modelsdjango-forms

"Utilize JavaScript to extract data from JSON and dynamically generate a

I'm currently facing an issue with reading JSON data and populating it in my HTML table. The function to load the JSON data is not working as expected, although the data typing function is functioning properly. I have shared my complete HTML code alo ...

javascripthtmljson

Discover the method to retrieve the month name from an HTML Date input value

Here we have a date input field <input id="customer-date" name="customer-date" type="date" required> Accompanied by this script const customerDate = document.getElementById('customer-date').value; const dateHandler = document.getElementB ...

javascripthtmldate

Having trouble with the preview feature when resizing images

Before trying to implement the JSFiddle was working correctly: http://jsfiddle.net/qa9m7t33/ However, after attempting to implement it, I encountered some issues: http://jsfiddle.net/z1k538sm/ While trying to resize an image, I realized that this example ...

javascriptjquerycss

How to retrieve FormData data using Axios

One challenge I'm facing is with an application that I have developed using VueJS, where users can upload files and send them to the backend. The process involves using Axios to send the file as FormData. However, once the file is received on the back ...

htmlexpresspostvue.jsaxios

Utilizing regular expressions in Powershell to modify a CSS file

Snippet from my current theme.css file: .actionBlock[selected] { color: var(--gray11); background-color: var(--gray11); } I am trying to modify color: var(--gray11); to color: #FFF; /* UPDATED : var(--gray11) */ After attempting in Po ...

cssregexpowershell

IIS Alert: Missing Images, CSS, and Scripts!

When I tried to publish my website using IIS, I encountered the error message Cannot read configuration file due to insufficient permissions. After attempting to add permissions for IIS_USRS and realizing that this user does not exist on my computer runnin ...

javascriptcssimageiisvisual-studio-2012

Content being pushed upward by Bootstrap modal

I've spent the last few hours working with the bootstrap modal, but I'm encountering some issues. Despite my thorough search, I haven't found anyone facing a similar problem. Here is the structure of my modal: <!-- Modal --> <div ...

htmlcsstwitter-bootstrapbootstrap-modal

Low-quality CSS Gradient Design

Hey everyone, Feel free to take a look at my preloader on this link: (Hit ESC as soon as the page loads to pause the website and focus on the loader) Upon closer inspection, you'll notice that there is an issue with the quality of the background l ...

htmlcsslinear-gradients

Ways to align text within a table cell on a background using CSS

I'm attempting to print jukebox strips with designated corner markings. The code I have written generates the HTML page for displaying the strips, allowing users to then print them. Jukeboxes typically feature selection buttons labeled ABCDEFGHJK and ...

htmlcss

What is the best method for submitting an ajax form post when it is dynamically loaded within a bootstrap modal window?

Need some help with a Bootstrap modal form that is not submitting via AJAX as intended. When the form is submitted, the entire page reloads instead of having the data posted in the background. How can I fix this while keeping the page state? Below is the c ...

javascriptjqueryajaxhtmltwitter-bootstrap-3

Ways to align my image to the left and text to the right using Bootstrap

body{ height: 100%; font-size: 1rem ; } .navbar-brand{ font-family: 'Syne Mono', monospace; color: black; size: 0.5rem; } header { width: 100%; height: 100vh; background: rgb(237,104,104); background: linear-gradient(90d ...

htmlcssbootstrap-4

url-resettable form

Currently, I am working on an HTML form that includes selectable values. My goal is to have the page load a specific URL when a value is selected while also resetting the form back to its default state (highlighting the "selected" code). Individually, I c ...

javascripthtmlforms

Adding padding-top to the h1 element within a vertically aligned div

I have a div with a set height and the content inside adjusts vertically according to the height. To align it vertically, I added the property display-table; to the parent div and display: table-cell; vertical-align: middle; to the child div. The alignment ...

css

The process of HTML compilation is halted due to the unexpected presence of the forbidden 'null' data type, despite the fact that null cannot actually be a valid value in

Encountering an issue with my HTML code, where the compiler stops at: Type 'CustomItem[] | null | undefined' is not compatible with type 'CustomItem[] | undefined'. Type 'null' cannot be assigned to type 'CustomItem[] ...

htmlangulartypescripttypeerrorngxs

An HTML form containing various input fields organized as a JSON string

I need to pass two parameters, param1 and param2, to a servlet. Param1 should be in JSON format, while param2 is a regular input value. param1 = {"id":"userid","name":"username","status":"userstatus"} param2 = add How can I accomplish this using the HTM ...

htmljsonservlets

Ways to enhance widget titles with borders on Blogger

As a Blogger user, I am looking for guidance on how to add a border around the title of each widget/gadget. When I place widgets such as About Me, Follow Us, etc., in my sidebar, I want them to have borders like in this image. While I know how to customize ...

htmlcsswidgetblogsblogger

Is it possible to use an SVG image as a border with a variable height in CSS

Check out this jsfiddle for my current project's nav setup. I want to center the logo in the middle of the nav with three links centered around it. However, I need the design to be responsive across various screen widths. Any advice on how to achieve ...

htmlcsssvgheightnav