Ways to fix the bootstrap image zoom issue

Here is my code snippet:

https://i.sstatic.net/BJoAP.png Currently, I am attempting to ensure that the thumbnails adjust to the background zoom.

I have been struggling to remove the black borders surrounding the thumbnails.

If anyone can provide assistance, it would be greatly appreciated!

Thank you in advance!

Answer №1

Ensure your thumbnail adapts to different screen sizes. By using the css class .img-responsive, you can make an image responsive and scale proportionally based on its parent element.

Answer №2

Take a look at this practical demonstration

observe the html

<p>Background image:</p>

<div class="zoom-bg"></div>

<p>Using nested image and <code>object-fit</code>:</p>

<div class="zoom-img">
  <img src="https://placeimg.com/300/200/arch">
</div>

take a look at the css

.zoom-bg {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-bg:before {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url(https://placeimg.com/300/200/nature) no-repeat center;
  background-size: cover;
  transition: all .3s ease-in-out;
}

.zoom-bg:hover:before {
  transform: scale(1.2);
}

.zoom-img {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.zoom-img > img {  
  object-fit: cover;
    width: 100%;
    height: 100%;
  transition: all .3s ease-in-out;
}

.zoom-img:hover > img {
  transform: scale(1.2);
}

experience the live demo by visiting this codepen link

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

How to automatically refresh the idToken in a Firebase http request when the currentUser object is null?

Currently implementing a Custom Auth System with React JS and Firebase for sign-in operations. The Back End generates a custom token, allowing the Front End to execute signInWithCustomToken. After successful sign in, an issue arises when refreshing the pa ...

Navigating through a multistep form in AngularJS using UI Router and arrow keys for seamless movement

Is there a way to navigate to the next or previous form step using arrow keys in AngularJS UI Router? The code provided below is currently allowing navigation with previous and next buttons. .config(function($stateProvider, $urlRouterProvider) { $stat ...

The css cropping issue with sprite image is not being resolved

I'm currently working on creating a sprite image for the bottom links on our media page, but I seem to be having trouble getting the image to crop correctly. Can anyone point out where I may be making a mistake? CSS .footer{ position:absolute; ...

How to retrieve the object's property with the highest numerical value using JavaScript

My current object is structured as follows: const obj = { happy: 0.6, neutral: 0.1, said: 0.3 } I'm trying to determine the best method to retrieve the property with the highest value (in this case, it would be "happy"). Any suggestions o ...

Concealing the presence of jquery and javascript

Currently developing a model-view-controller application (but this question can apply to any website). I'm contemplating whether it's acceptable to have exposed jQuery and JavaScript in a view. Essentially, when the program is run and source code ...

Conceal a button using an AJAX POST request

I'm encountering an issue with my Ajax post where I am trying to disable the button used to submit data. I've reviewed my code and it seems accurate, but the button is not getting disabled. I attempted using $("#refreshButton").attr("disabled", t ...

scrapy css last-child selector unable to target text

I am currently facing a challenge in selecting and matching elements within an HTML document using CSS selectors in the Scrapy framework. My issue lies with extracting information from a specific field using the last-child selector. Below is the snippet o ...

Place the first paragraph within a div above another paragraph in the same div

Presently, I have this item: https://i.stack.imgur.com/0dBd9.png however, my objective is to achieve this look: https://i.stack.imgur.com/NEBZf.png The code snippet in question is as follows: .bonus-div { width: 290px; height: 29px; ma ...

Can we send a dynamic form using AJAX?

I am seeking a method to submit a page filled with quantities to another page and then retrieve their values. Here is my setup: <input type="number" name="item1" /> <input type="number" name="item2" /> <input type="number" name="item3" /> ...

Is it necessary for me to create a module for every individual file?

Just diving into Angular and trying to figure out the best way to modularize my app. app toolbar toolbar.module.js menu.html index.html search.html sub-system-1 subSystem1.module.js directive-templat ...

Bootstrap modal assistance does not function properly when used together with ajax requests

I'm experiencing an issue with a small class project where the data is not being inserted into the database. I collect the data using a bootstrap modal and pass it to the php file using ajax. The problem seems to be occurring when executing the script ...

Identifying patterns within a string using JavaScript and TypeScript

Given a user-input pattern, for example [h][a-z][gho], and a string "gkfhxhk", I am attempting to determine if the string contains the specified pattern. The pattern dictates that the first character must be 'h', followed by any letter from a-z, ...

What are the buttons featured in the header of this mobile-friendly bootstrap panel

Can anyone offer advice on how to make a bootstrap panel header responsive? The panel has a title with several buttons on the right side. While it looks good on a large screen, it becomes messy on smaller browser sizes. You can find my complete code here ...

Tips for accurately aligning a relative p tag within a td

Description: I am trying to prevent text overflow in a table cell and position the text underneath a header without wrapping it under an image. I have tried setting a static width for the image and adjusting the left property, but it is not working as expe ...

Utilizing JavaScript-set cookie in PHP: A comprehensive guide

I am currently facing a situation where I am setting a cookie using a JavaScript script on my page, but I need to access this value while generating HTML on the server-side using PHP. Let me explain the scenario. When a user requests a page, PHP star ...

"Converting circular structure into JSON" - Inserting BigQuery Data using Cloud Function in Node.js

I am currently facing an issue while attempting to load an array of JSON objects into a BigQuery Table from a Cloud Function built in NodeJS. Despite not having any circular references, I encountered the error message "Converting circular structure to JSON ...

The position of the absolute item is not determined in relation to its container

I am experiencing an issue with two items in a 'relative' container. The problem arises when the 'absolute' item should be positioned relative to the container, but instead, it is being placed relative to the second 'static' ...

What is the best way to retrieve the second to last element in a list

When using Protractor, you have convenient methods like .first() and .last() on the ElementArrayFinder: var elements = element.all(by.css(".myclass")); elements.last(); elements.first(); But what about retrieving the element that comes right before the ...

Integrate a Facebook Like-box within a customized jQuery modal window

I've been working on inserting the Facebook like-box code into my page and trying to display it within a jQuery modal dialog. Here's the code I'm using: <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>< ...

Tips for aligning text box to the right

I am struggling to position a text box on the right side of my webpage in order to display a carousel on the left. I attempted to use the float property, but it doesn't appear to be working as intended. https://i.sstatic.net/cSKDS.png <div cla ...