Displaying a large image within a small div using Bootstrap 4

I have a specific image with dimensions of 244px by 751px, and I am trying to place it inside a div container that is 132px by 132px. I want the image to maintain its aspect ratio without being stretched. Despite using the img-fluid class, the image does not behave as expected. Can you please help me identify what I am doing wrong? 

.thumbs-container {
  width: 132px;
  height: 132px;
}

.item1 {
  background-size:contain;
 }
<div class="thumbs-container col-2">
          <img
            class="item1 img-thumbnail"
            src="http://via.placeholder.com/244x751"
          />
        </div>

cssbootstrap-4

Answer №1

.thumbs-container {
  width: 132px;
  height: 132px;
}

.item1 {
  background: url('http://via.placeholder.com/244x751')no-repeat center center;
  width: 132px;
  height: 132px;
  background-size:cover;
 }
<div class="thumbs-container col-2">
          
          <div class="item1"></div>
        </div>

Answer №2

Adjust the height of .item1 to be 100%

.item1 {
    height: 100%;
}

Answer №3

background-size:contain is specifically designed for images used as backgrounds in CSS. To apply this effect, simply remove the img tag and set your desired background using CSS like so:

HTML

<div class="thumbs-container col-2"></div>

CSS

.thumbs-container {
    width: 132px;
    height: 132px;
    background: url('http://via.placeholder.com/244x751') no-repeat center/contain;
}

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

Hover effects using CSS3 transitions for the content before

Greetings everyone, I apologize for any language barriers. The title may not be clear at first glance, so let me explain what I am attempting to achieve. I have a navigation menu structured like this: <nav> <ul> <li>& ...

csscss-transitions

Clicking within the text activates the dropdown menu, but clicking outside the text does not

My custom drop down menu is not functioning properly. When I click on the text, it successfully links to another place, but when I click beside the text, it does not link. Can you please help me identify what's wrong here? Your assistance would be gre ...

javascriptphpjqueryhtmlcss

Applying FadeIn Effect to Background Image on Hover

For several applications, I have utilized this jQuery code that swaps images with a smooth fading effect. It's incredibly straightforward. $(document).ready(function() { $("img.a").hover( function() { $(this).stop().animate({ ...

jquerycsshoverfade

Arrange symbols in fontawesome into a pile

Is there a way to stack grid icons in the font awesome framework to create a 3x2 grid icon? Demonstration Jsfiddle <a href="./"><i class="fa fa-square"></i> 1x1</a> <a href="./" ><i class="fa fa-square"></i>< ...

jquerycssfont-awesome

Tips for converting an entire column along the vertical axis to a different language

Looking for a solution with my grid view where I want to translate the items of the second column on the y axis, as shown in the image. I attempted to use the translateY() function, but it resulted in the need to scroll in order to see the translated items ...

cssgridviewfrontendgridweb-frontend

Place attribute value directly under the border of an HTML element using a combination of JavaScript and CSS

I'm currently working on a JavaScript script to scan the DOM for elements that have a specific custom attribute called example-type. The goal is to apply CSS styling to draw a border around these elements and then display the value of the example-type ...

javascripthtmlcss

How can I adjust padding values specifically for mobile devices within the Bulma CSS framework?

After constructing a website with the Bulma CSS framework, I encountered an issue with padding on mobile devices. To optimize the user experience, I need to reduce the padding on smaller screens to 5% or less instead of the initial 10%. However, I am unsur ...

htmlcssbulma

Discovering descendant div elements

I've been conducting some research, but I'm struggling to find a specific answer for this. Here is the HTML code snippet: <div class="collapsingHeader"> <div class="listItemWrapper"> <div class="itemWrapper"> ...

javascriptjquerycss

Safari browser is experiencing issues with the custom file upload script

My custom upload script allows users to easily select images for upload by clicking or dragging them into the designated box. A preview of the chosen image should appear, and this functionality works smoothly in Firefox and Chrome. However, I've encou ...

javascripthtmlcssfile-uploadinput

Tips for positioning a mat-form-field beside an h1 tag

I've been attempting to place an h1 next to a mat-form-field from Angular Material, but I'm encountering some difficulties. Here's what I've attempted so far: <div class="mat-elevation-z8"> <mat-form-field> <mat-l ...

htmlcssangularangular-material

What causes the menu icon to shift to the left upon clicking it?

I'm currently working on a website project that involves implementing a fixed navbar with jQuery sliding animation for the menu. However, I've encountered an issue where the "menu_icon" is getting pushed to the left every time the menu slides dow ...

javascriptjqueryhtmlcss

Tools for generating Xpath or CSS selectors on Firefox and Chrome browsers

Struggling with finding helpful plugins for my Selenium webdriver development. Firebug for FF and Selenium IDE are not working for me. Despite trying multiple plugins for both FF & Chrome, I can't find anything to generate xpath or CSS strings. Lookin ...

cssseleniumuser-interfacexpathspy

What is the best way to include a text input as the last option in a Select input form field?

I would like to implement a select input feature where users can choose from predefined options, with the added functionality of including a text input field as the last option for users who prefer to enter their own category. How can I achieve this? Curr ...

javascripthtmlcssnode.jsexpress

I have successfully implemented a click effect on one image and now I wish to apply the same effect to the remaining images

I've exhausted all my options and still can't crack this puzzle. Let me break it down for you: Upon entering the page, users are greeted with a collection of images each tagged with classes (for example, img01 and img02). When an image is clicke ...

javascriptjquerycssimage

Ways to delete a CSS attribute with jquery

Is there a way to eliminate a CSS property from a class without setting it to null? Let's say I have a class called myclass with the property right:0px. I want to completely remove right:0px from my class, not just set it to null. How can I achieve th ...

javascriptjqueryhtmlcss

"Ensure that the data in the div is being updated accurately via AJAX in ASP.NET MVC

I'm currently using a div element to display data on page load through AJAX calls. $(document).ready(function () { email_update(); }); function email_update() { $.ajax({ url: '@Url.Action("EmailsList", "Questions")', ...

javascriptjquerycssasp.netajax

Customize Bootstrap Navbar Dropdown Menu to Align on the Right

I am encountering an issue where the dropdown menu appears at the bottom-right of the bell icon when I click on it (see image link below). However, I would like the dropdown menu to appear at the bottom-left instead. How can I achieve this? https://i.ssta ...

bootstrap-4drop-down-menubootstrap-5

What is the best way to create titles with a background?

My goal is to have a title overlay an image with specific width and the text displayed in blocks. To better illustrate, here's an example: I prefer to achieve this effect using CSS; however, I am open to utilizing Javascript if needed. ...

javascripthtmlcss

When CSS width:auto expands beyond its intended length

I'm experiencing an issue when I set the width to auto, the div expands to full length rather than adjusting to the width of the inner divs. Here is the HTML code: <div class="vidswraper"> <div> <div class="videoimage"> <img src ...

htmlcss

Propelling Information using the Chakra-UI Drawer Element

I've been exploring the features of the Chakra-UI drawer component and you can find more information about it here. Overall, the functionality aligns with my needs, except for one particular aspect - instead of pushing the content to the side, the dra ...

cssreactjschakra-ui