What is the best way to automatically resize images in Bootstrap thumbnails?

<div class="container">
  <div class="row">
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img  src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-6 rimg-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-6 img-thumbnail"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
    </div>
   </div>

Looking for help with resizing images in the Bootstrap Grid System? I used the img-thumbnail class but am struggling with large image sizes that don't adjust when the screen size changes. My goal is to have images resize automatically based on the screen size - larger images for larger screens and smaller images for smaller screens. I came across a solution on stack-overflow involving defining specific dimensions for thumbnails, but it didn't work for me. Any alternative suggestions or tips would be greatly appreciated.

.thumbnail{
  width: 300px;
  height: 300px;
  overflow: auto;
}

Thank you in advance for your assistance.

htmlcssbootstrap-4

Answer №1

If you want your images to be responsive, make sure to include the img-fluid class on each img tag.

<div class="container">
   <div class="row">
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
      <div class="col-lg-4 col-6 img-thumbnail"><img class="img-fluid" src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
   </div>
</div>

Answer №2

Utilizing the image-thumbnail class within the img tag instead of the div

Answer №3

I have decided to remove the img-thumbnail class from the img tag.

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <div class="container">
  <div class="row">
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/04LDEYRW59.jpg" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/90V03Q5Y60.jpg" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/O83SF2RB6D.jpg" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/5JVPSVP7EI.jpg" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/C5Y10KIIHA.jpg" alt=""></div>
    <div class="col-lg-4 col-6"><img src="https://d2lm6fxwu08ot6.cloudfront.net/img-thumbs/960w/YSSFRY5B25.jpg" alt=""></div>
    </div>
   </div>

Answer №4

Make sure to specify the height and width using percentages instead of pixels.

For example:    .thumbnail{
         width: 70%;
         height: 30%;
         overflow: auto;
         }

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

Designing a final splash screen for my game with the help of JavaScript, Cascading Style Sheets, and

I'm facing a challenge with setting up an end screen for my candy crush game. I have implemented a timer, but when the time runs out and certain conditions are met, the end screen fails to appear. Do you know what might be causing this issue? functio ...

javascripthtmlcss

Centering numerous elements on all screen sizes and devices

Is there a way to align elements in the center of the screen both vertically and horizontally without specifying width and height for mobile and desktop views? How can I make it responsive so that it appears centered on all devices? .parent-container{ ...

htmlcss

"Issue with scaling on Responsive Canvas leading to blurriness

I am working on a Canvas project and I want to make sure it is easily navigated on any device, whether it's a desktop or mobile. To achieve this, I decided to make the canvas responsive. Originally, the canvas was set at 800x800 which looked fine but ...

javascripthtmlcsshtml5-canvas

CSS fails to display image within PHP script

Having an issue with displaying CSS through a PHP file. Everything seems to be working fine until I try to display an image from the database. The source code does accept the value from the DB, but the image doesn't show up. Interestingly, the image d ...

phpcssimage

CSS - Overlapping <a> elements when resized

My buttons have the following properties: background: #c6cdf2; border: 1px solid #8896e4; border-radius: 3px; padding: 6px 10px 3px 10px; When the page resizes, the buttons don't respect the padding and start overlapping each other. https://i.sstat ...

htmlcssresponsive-design

The functionality of changing the checkbox to "checked" by clicking on the span is not

How can I create a toggle button with a checkbox using css and jquery? Clicking on the span representing the toggle button should change the checked property of the checkbox. Currently, the span does not change the property, even though it triggers the c ...

javascriptjqueryhtmlcss

I'm looking for a CSS layout that can change the order of columns in a row stack for desktop view. Can anyone help me with this? (refer to

I am struggling with arranging elements in HTML and CSS. As a beginner, I am faced with the challenge of ordering desktop and mobile layouts differently. The current code I am using looks like this: <div class="row "> <div class=&quo ...

htmlcsslayoutbootstrap-4

Integrating dual Google Maps onto a single HTML page

I'm facing an issue with implementing two Google maps on a single page where the second map seems to be malfunctioning. Below is the code I am currently using: <style> #map-london { width: 500px; height: 400px; } #map-belgium { wi ...

javascripthtmlcssgoogle-maps

Unable to receive any response with AJAX requests

Welcome to my HTML page <html> <head> <title>Using AJAX</title> </head> <script type="text/javascript" src="ajax.js"></script> <body> <form action="searchItems.php" name="searchItem" method="p ...

javascriptphphtmlajax

Unusual outcomes observed with CSS selector

I seem to be encountering some unexpected outcomes with one of my selectors. Following a reset, I have established certain base settings - including this one: a:not([class]) { text-decoration:underline; &:link, &:visited, &:hover, &a ...

csscss-selectorsless

What is the best way to focus on an object using a particular variable in javascript?

I am currently developing an online game where each user is assigned a unique ID. Below is the client code used to create a new player: const createNewPlayer = (id) => { return player[player.length] = { x:0, y:0, id:id } } The ...

javascriptarrayshtmlobject

Unresolved conflict stemming from an HTML closing tag in the index.html file, despite both source and destination files being identical

I am currently facing a challenge while trying to merge my code with the master branch through a pull request. The conflict arises in the src/index.html file, specifically on line 17 which states </html> needs to be corrected to </html>. It&apo ...

htmlangularversion-controlbitbucketpull-request

What is the best method to choose a random color for the background when a button is pressed?

Does anyone know how to create a button that changes the background color of a webpage each time it is clicked? I've been having trouble with the javascript function in my code. I've tried multiple solutions but nothing seems to work. Could someo ...

javascripthtmlcss

What is the best method for enclosing all text within an HTML document with a different element?

For example: FROM <div> whats up! <div> whats up2! </div> thank you for your help <div></div> </div> TO <div> <span>whats up!</span> <div><span> whats up2! </span&g ...

javascriptjqueryhtml

Transforming the primary image to the thumbnail image when hovering over it with JSON objects

Currently, I am facing an issue with my single-page web application project that involves using jQuery, JSON Bootstrap. So far, I have successfully created a category page, product selection page, and item page. The problem arises on the item page where ...

javascriptjqueryjsonajaxbootstrap-4

Creating a Table with HTML and CSS

I am struggling to include a column span paragraph in my table and then display the actual table values below it You can see what I am attempting to achieve in this image https://i.sstatic.net/VpmTH.png <table> <thead> ...

htmlcss

Tips for displaying a page with an unchecked checkbox on bootstraptable

Recently, I've been working with bootstraptable, but I've been struggling to figure out how to load the page with the sort boxes unchecked. I've read through the documentation multiple times, but all of the functions seem to be centered arou ...

javascriptjquery-uibootstrap-4bootstrap-table

Is there a problem with the Drag and Drop API?

So here's the deal: I've encountered a problem with the HTML5 Drag and Drop API. In short, besides the essential dragstart, dragover, and drop events, there are three more events - mousedown, mouseup, and mouseleave - that are crucial for achiev ...

javascriptjqueryhtmldraggable

Choosing a Specific Column within a CSS Grid

Currently, I am trying to figure out a method for selecting columns within a CSS grid. Through the use of the :nth-child() selector, I managed to select a column in a static grid. For instance, in a grid with 3 columns, :nth-child(2) will target every grid ...

javascriptjquerycsscss-grid

Having trouble uploading a file with sendkeys to a button element inside an iframe using Selenium in Python

[Technology]: Python + Selenium I am currently attempting to upload a local file using the upload file button. Initially, I tried to locate the element and click on the button, which was successful with the following code: driver.switch_to_frame("upload ...

pythonhtmlseleniumselenium-webdriver