Tips for aligning images within Bootstrap columns and using auto zoom to properly fill the space

Here is the code snippet for displaying images:

<div class="row">
    <div class="col-12">
      <div class="row">
        <div class="col-lg-6 col-md-6 col-sm-12">
          <div class="xon-card">
            <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/9/6/960x500_3_.jpg" alt="">
          </div>
        </div>
        <div class="col-lg-6 col-md-6 col-sm-12">
          <img class="img-fluid" src="https://www.adidas.co.id/media/scandiweb/slider/m/e/mermaid--teaser-update-5.jpg" alt="">
        </div>
      </div>
    </div>
  </div>

In addition to this, I also need to create some buttons like the ones shown above.

Utilizing Bootstrap 5 for implementation.

htmlcssimagebootstrap-5

Answer №1

enhance the appearance of image:

dimension: 100%;
scale: 100%;
fitting-style: cover;

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

Unable to assign an ID value to a <span> element within a <th v-for="" > tag

I am attempting to assign the ID value of the span tag within a for loop using v-for. <table class="APPPPTable" style="width:100%;font-size:11px;"> <thead> <tr> <th v-for="heading in tableInfo.columns" class="text-c ...

htmlvue.jshtml-tabletooltipbootstrap-vue

Issue with React TSX component in NextJs 14.0.4: Local MP3 files cannot be played, only external online MP3 files work

I have created a component that wraps around HTML audio and source tags. It functions perfectly when playing mp3 files from an external source, like this sound clip . However, it returns a GET 404 error when trying to access local mp3 files. Can anyone exp ...

htmlreactjstypescriptnext.jsaudio

Repositioning the images to a new location

I've been having trouble moving the small images (thumbnails) on my page. They seem to be stuck in place on the left and I've tried adjusting their margins using a div id, but it hasn't had any effect. Below are the relevant code snippets: ...

htmlcssimage

When using the <object> tag, it may not always render at 100% height as intended

Application Inquiry I am seeking assistance with a web page that features a title, and a sticky menu bar at the top, allowing the rest of the space for displaying content. When a menu item is clicked, the objective is to load a page in the content at full ...

htmlcssobjectinnerhtml

What is the process for converting a hexadecimal color to rgba when using the Less compiler?

Here's the code snippet I'm working with: @shade : #d14836; .stripes span { -webkit-background-size: 30px 30px; -moz-background-size: 30px 30px; background-size: 30px 30px; background-image: -webkit-gradient(linear, left top, ri ...

cssless

How can one safeguard their JavaScript code from potential threats and unauthorized access?

How can I ensure that a web app is not accessible or operated from the local file system? The app has a custom front-end workspace created with JS and various libraries, which should only be usable when the user is logged in to the domain with an active i ...

javascripthtmlcss

Trouble with webpage design persists following recent modifications

Today, I decided to make some alterations on the header.php file of my WordPress website in order to tweak the flag icons displayed at the top of the page. However, when I refreshed the page, everything looked completely chaotic. Even after undoing all th ...

phphtmlcsswordpress

Animations in Angular fail to operate within mat-tabs after switching back when custom components are being utilized

I am facing a similar issue as Olafvv with my angular 16 project. The problem occurs in a mat-tab-group where the :enter animations do not work when navigating away from a tab and then returning to it. However, in my case, the issue lies within a custom su ...

htmlangularanimationmat-tab

Adaptable Semantic UI form design

Welcome, internet friends! If anyone out there has a moment to spare and is familiar with Semantic UI, I could really use some assistance... Currently, I am working on a form that looks great on larger screens like this: https://i.stack.imgur.com/cafc5.j ...

javascripthtmlcssresponsive-designsemantic-ui

Make sure the text fits perfectly without any extra spaces

When working with CSS/HTML, I noticed that using a simple text within a div without any margin or padding, and specifying a font-size of 36px with a line-height also set to 36px doesn't fit perfectly - there is always some spacing at the top of the li ...

htmlcsstypography

Troubleshooting Bootstrap select box design discrepancies

Currently revamping a website and encountered an unusual issue with select boxes. There seems to be an overlapping white space where the option values should be. Here's a visual reference: View Image of Select Box Issue Utilizing Bootstrap for the re ...

javascriptjqueryhtmlcsstwitter-bootstrap

The CSS styles for a React component in Rollup are not being incorporated into the server-side rendering document in NextJS

I recently created a small npm package that exports a single component. The component is styled using SCSS modules and bundled with Rollup. Everything appeared to be working well until I imported it into a NextJS project, where I noticed that the styles ar ...

cssreactjsnext.jsrollup

Maintain the expanded menu even after selecting a sub-item using jQuery

After conducting a thorough search, I was unable to find exactly what I needed. I have successfully implemented cookies on my menu so that when the page is reloaded, it remembers which menus were open. However, I noticed that clicking on a sub-item of Hy ...

javascriptjqueryhtmlcss

Ways to show or conceal content using only CSS

Looking for help with switching content using pure CSS. I'm not very skilled with CSS and would prefer to avoid using JavaScript if possible. Any assistance would be greatly appreciated. Below is a snippet of the code: If A is clicked, toggle-on-con ...

htmlcss

Aligning text fields and text areas is not consistent

Seeking a solution to align two input fields side by side, with a textarea directly below them form ul { list-style: none; text-align: center; } form ul li { display: inline-block; margin-left: auto; margin-right: auto; } #nameform, #emailform ...

htmlcsscentering

unable to load the ajax file

While setting up Ajax, I encountered an error message in IE that reads: Description: An issue occurred during the processing of a configuration file needed to handle this request. Please check the specific error details below and adjust your configuration ...

c#htmlajaxvisual-studio-2010

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

javascripthtmlcssstyles

One-time PHP form submission only

On my website, I offer a variety of PDF download options. To access these downloads, I encourage visitors to sign up using a form. After signing up, they receive a direct link to the chosen PDF in their email. My goal is to streamline the process so that ...

javascriptphphtml

Why do CSS Variables have different syntax for setting and getting values?

When we use CSS Variables, also known as CSS Custom Properties, the syntax for setting and getting values is different. To set a value for --my-custom-width, we use: :root { --my-custom-width: 120px; } Similarly, to get the value of --my-custom-width, ...

csscss-variables

Partially loading CSS stylesheet

My directory structure looks like this.... iamdan > css > style.css The php file, named head.php, is located in a folder called includes within: iamdan > includes > head.php This file contains the following code: <head> <title ...

phpcssload