Ways to reduce the size of images in Bootstrap 4

Is there a way to adjust the height of the images to make them fit better on the page? Here is an example of what I'm trying to achieve: https://i.sstatic.net/BMlWl.jpg

I attempted to use custom CSS to modify the height, but it ended up making the images look odd and out of place.

Below is my HTML code:

   <!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">

 <!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="41312e313124336f2b3201706f70776f71">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>

<div class="container-fluid p-0 mt-2">
      <div class="row ">
        <div class="col-md-6 col-12 p-0">
          <img class="img-fluid" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
        </div>
        <div class="col-md-6 col-12 p-0">
          <img class="img-fluid" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </div>

htmlcssbootstrap-4

Answer №1

Here is what you have been searching for

.h-200 {
  height: 200px;
}

img.image {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid p-0 mt-2">
  <div class="row ">
    <div class="col-md-6 col-12 p-0 h-200">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187605/pexels-photo-2187605.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260">
    </div>
    <div class="col-md-6 col-12 p-0 h-200">
      <img class="img-fluid image" src="https://images.pexels.com/photos/2187622/pexels-photo-2187622.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
  </div>

Find the fiddle link here https://jsfiddle.net/6hpsoynf/1/

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

Populate a form with data retrieved from a MySQL query result

One aspect of my project involves a specific interface called 'designation.php' that contains a form. The goal is for users to enter a 'designation code' (which serves as the primary key) and then click the 'update' button, pr ...

phphtmlmysqlajax

Tips on customizing the appearance of the dropdown calendar for the ngx-daterangepicker-material package

Is there a way to customize the top, left, and width styling of the calendar? I'm struggling to find the right approach. I've been working with this date range picker. Despite trying to add classes and styles, I can't seem to update the app ...

javascriptcssangulartypescriptangular-material

What caused the mat-date calendar style to malfunction?

I integrated mat-date into my Angular project, but encountered an issue where the styles of the calendar were not displaying properly when clicking the icon. Here is the displayed calendar effect I attempted to troubleshoot by commenting out the styles o ...

cssangularmaterial-uiangular-materialmat-datepicker

Unable to choose multiple sentences within an HTML Page displayed in a UIWebView

I am dealing with an HTML page structured as follows: <html> <body> <div id='0> <span id='0'>Hi </span> <span id='1'>How </span> <span id='2'>Are </span> <sp ...

iphonehtmluiwebviewselectionsentence

jQuery, the magical tool that can make forms disappear and reappear in a blink

As the heading suggests, here is the code I attempted. The forms are designed to be displayed one after the other, with each subsequent form's appearance being determined by the information provided in the previous forms. $(document).ready(function() ...

phpjqueryhtmlcss

Add a variety of icons to every item in a list using HTML

Is there a way to display multiple icons on the left side of each element, with the option to have none or many? If so, could you please guide me in the right direction. <header> <nav> <ul> <a href="http://localhost:4000 ...

htmlcssweb

What are the steps to storing numerical inputs as variables using jQuery and then using them to perform calculations in order to update the input numbers

Currently, I am in the process of creating a BMI calculator using HTML and jQuery. <form id="bmiCalculator"> <fieldset> <legend>BMI Calculator:</legend> <p> <label>Height: ...

javascriptjqueryhtml

Creating a link with a POST method and without using a new line

I am attempting to generate a square matrix and send data using the post method. I have discovered a solution involving JavaScript and form submission, but each time a new form is created, it results in a new line being added. Alternatively, if I move th ...

javascripthtmlhref

Guide on inserting HTML text box form input into Express route parameter

I'm currently working on implementing a feature that allows users to search through my mongo database using an endpoint structured like this: app.get('/search/:input', function(req, res){ console.log(`get request to: /members/${req.params ...

javascripthtmlnode.jsmongodbexpress

Strange Vertical Offset Issue with Custom Fonts in CSS

I have implemented a custom font in my CSS using the following method: @font-face { font-family: 'Gabriola'; src: url('Gabriola.eot'); src: url('Gabriola.eot?#iefix') format('embedded-opentype'), ...

csscross-browserfont-face

Fetching data within a defined time range in Django

Currently working on creating my dashboard, the design is all set. However, I'm facing a challenge in retrieving specific data sums from my MySQL database. For instance, how can I retrieve the revenue of the last 15 days? models.py class JaGAnalytics ...

pythonhtmlmysqldjango

What is the best way to fill in predetermined HTML with information using jQuery?

Currently, I am working with several ajax forms that allow me to add rows of data dynamically using ajax. While the form submission is functioning correctly, I am having trouble figuring out the best way to append the newly inserted data into the database. ...

jqueryhtmlajaxtemplates

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Switching the html src to data-src causes the image to not be generated

After making the change from using src to data-src in the image tag, I noticed that the image is not visible in the browser. Even though src worked fine, changing it to data-src caused the image to disappear. import GooglePlayImages from '../../assets ...

htmlreactjsfrontend

create a miniature display featuring text and visuals using HTML

Currently, I am in the process of developing a website and require assistance. My goal is to have a small screen appear with text and images whenever a link is clicked, similar to the functionality found in Chrome's "chrome://settings/startup". Howeve ...

html

Challenges with dynamically adding rows using jQuery

I am trying to create a dynamic form that allows users to select a project and then populates tasks based on the selected project from a database query. The user can then enter hours for each task, which are updated based on the project id and task id comb ...

phpjavascriptjqueryhtmlmysql

What is the technique for determining the scale percentage of an image with the background-size property set to cover?

I am trying to determine the scale of an image after it has been resized. By using background-size: cover on the body background image, I want to ensure that the image maintains its aspect ratio and expands or shrinks to fit both the width and height of t ...

cssbackground

Tips for positioning tables on a page

I have 4 tables and a submit button. How can I make them more compact? Maybe like this: </img> This is my HTML code: <body> <form action="/cgi-bin/form.py" id="myform"> <table class="table-fill"> ... ...

htmlcss

Flexbox positioning: Absolute element within a relative container

Having a div using display:flex and position:relative, I am looking to add an overlay element at the bottom of this div by applying position:absolute to it. Ideally, the height of the overlay should be auto, but it's not necessary. The issue arises wh ...

htmlcssflexbox

Differences in behavior of multiple select with track by in Angular versions above 1.4.x

I recently upgraded my product from Angular 1.2.x to 1.4.x. Since updating to angularjs 1.4.x, I've encountered an issue: What I have: I included code snippets for both angular 1.2.0 and 1.4.8. You can check out the comparison on JSFIDDLE. Explanat ...

javascripthtmlangularjshtml-select