Setting the maximum width for images across various Bootstrap responsive sizes: a step-by-step guide

I'm struggling with optimizing images of varying sizes in bootstrap to ensure they are responsive without losing quality.

Current Image:

https://i.sstatic.net/akoNy.jpg

Desired Image:

https://i.sstatic.net/37VFX.jpg

HTML:

<div class="row">
<?php
        $select_stmt=$db->prepare("SELECT * FROM destaques ORDER BY id DESC LIMIT 1;"); //sql select query
        $select_stmt->execute();
        while($row=$select_stmt->fetch(PDO::FETCH_ASSOC))
        {
    ?>
<div class="col-sm-12 col-md-6 col-lg-4" id="destaques_espaco">
    <br>
        <a style="display:block" href="admin_destaques.php" id="url_sem_linha"> 
            <div id="imagem"><img src="upload/destaques/<?php echo $row['image']; ?>" class="img-fluid" id="imagem_destaque"></div>
            <div id="titulo_menu"><?php echo $row['titulo'];?></div>
        </a>
        <br>
</div>
    <?php
        }
    ?>

CSS:

#imagem_destaque{
  min-height: 250px;
  max-width: 300px;
}

#titulo_menu{
  max-width: 300px;
  background-color:#C2C23A;
  font-weight: bold;
  font-size: 20px;
  color: white;
  line-height: 2;
  padding-left: 10px;
}

#titulo_menu:hover{
  color: white;
  text-decoration:none;
}

Answer №1

Give this a try, it worked for me. Hopefully, it will be helpful for you.

#image_highlight {
  height: 250px;
  width: 300px;
}

#menu_title {
  max-width: 300px;
  background-color: #C2C23A;
  font-weight: bold;
  font-size: 20px;
  color: white;
  line-height: 2;
  padding-left: 10px;
}

#menu_title:hover {
  color: white;
  text-decoration: none;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>

<body>
  <div class="container-fluid">
    <div class="row justify-content-center">
      <div class="col-sm-4" id="highlight_space">
        <br>
        <a style="display:block" href="admin_highlights.php" id="url_no_underline">
          <div id="image"><img src="https://i.ebayimg.com/images/g/lAgAAOSwWAhcFLHg/s-l300.jpg" class="img-fluid img-1" class="img-fluid" id="image_highlight"></div>
          <div id="menu_title">Title</div>
        </a>
        <br>
      </div>
      <div class="col-sm-4" id="highlight_space">
        <br>
        <a style="display:block" href="admin_highlights.php" id="url_no_underline">
          <div id="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid img-1" class="img-fluid" id="image_highlight"></div>
          <div id="menu_title">Title</div>
        </a>
        <br>
      </div>
      <div class="col-sm-4" id="highlight_space">
        <br>
        <a style="display:block" href="admin_highlights.php" id="url_no_underline">
          <div id="image"><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS1bHL-HroyjayQ-OzEENg90I7a6CdtNRnn6l7KdSC8LlXr7H5w" class="img-fluid" id="image_highlight"></div>
          <div id="menu_title">Title</div>
        </a>
        <br>
      </div>
    </div>
  </div>
</body>

</html>

Answer №2

If you're looking to enhance your <img/> tag, give this a shot and see if it fits your needs.

Insert this snippet into your <img/> tag:

style="max-width: 120px; max-height: 120px"

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

Automatic capitalization of menu options in Bootstrap dropdown

Is anyone else curious about why the menu items are in all caps while the markup is in lower case? What steps can be taken to prevent this from happening? https://i.stack.imgur.com/S86RO.png ...

I am encountering a 'Cannot GET /index.html' error when running my Node.js and Express application, even though I do not have an index.html file

I'm puzzled by the error I'm encountering. Everything runs smoothly on my local machine, but when I try running it on Linux, this error pops up. I've already created ejs files and included all necessary components. Additionally, there is no ...

Traversing JSON Data using Vanilla JavaScript to dynamically fill a specified amount of articles in an HTML page

Here is the code along with my explanation and questions: I'm utilizing myjson.com to create 12 'results'. These results represent 12 clients, each with different sets of data. For instance, Client 1: First Name - James, Address - 1234 Ma ...

Enhancing websites with CSS3 and VueJS for fluid and captivating background gradients transitions

After implementing a logic in the application, the gradient is now changing dynamically. <template> <div :style="`background-image: ${backgroundImage}`" class="background"> <snackbar /> <nuxt /> <default-footer /&g ...

Inserting an Excel spreadsheet into a webpage as a table

Looking for a quick and easy way to include an Excel spreadsheet on a website? Let's say you need to display a table with 100 data points in an HTML or PHP file. ...

Can WireMock be used to send an HTML file as a response?

Is it possible to return an HTML file as a response in WireMock and how can this be achieved? ...

Having trouble with the width:auto attribute in IE7?

CSS #wrapper .tn{ width:auto; height:20px; line-height:20px; float:left; padding:5px 2px 5px 5px; margin:0 5px 10px; font-weight:bold; background:#f0f0f0; } HTML <div id="wrapper"> ...

Enhance the visual appeal of your checkboxes in React Fluent UI by customizing the color of the checked mark and

I have a React application using Fluent UI. Currently, the <Checkbox/> component is displaying with its default colors and behavior like this: https://i.sstatic.net/ZSL7I.png I want to customize the color of the checked mark and label (Green for ch ...

ReactJS -- Button Overlay Issue: Unresponsive Clicks when Positioned on Top of List

Please check out the Code Example in my Code Sandbox demo that I have set up https://codesandbox.io/s/W7qNgVnlQ I am trying to get the button action of the Floating Button to work, but currently it is triggering the Action assigned to the ListItem instea ...

When using Angular 5's ngModel, the user interface displays the updated value dynamically without requiring the

When filling out my form, I encounter an issue with a select element and a bind variable. If I make a change to the value and save it, everything works as expected. However, if I make a change in a modal window but then close the modal without saving the v ...

Positioning Google Chart in HTML

I'm attempting to arrange three distinct Google pie charts in a horizontal layout. At present, I have applied inline CSS for formatting purposes. Oddly enough, the third chart always ends up on a separate line. Could anyone kindly point out my error? ...

What are effective strategies to stop the generic * { … } style from overriding its parent tag?

How can I prevent my general * { ... } style from overriding the parent tag? In the given scenario, I want the text "sssssssss" to have the style text-huge. .text-huge { font-size: 28px !important; color: green !important; } * { font-size: 12px; ...

Incorporate Zurb Foundation seamlessly into your current codebase without causing any

While Foundation is great for creating whole page designs, it may not be the best choice when you just need a small snippet to add into existing HTML and CSS code. In Foundation's _global.scss file, there are global settings such as: html, body { h ...

Working with CSS3 transitions in PHPStorm is a breeze

For some reason, my phpstorm does not provide code completion for CSS properties like -webkit-translate, translate, or animation. Has anyone encountered this issue before? Any suggestions on how to fix it? ...

Enhance the appearance of the popover by incorporating an arrow-like element for dismissing the

Here is some code I want to modify: https://i.stack.imgur.com/0C61Y.png I would like to add an arrow element at the top, similar to this: https://i.stack.imgur.com/pDT3s.png This will give it a popup-like appearance. Below is the CSS styling for the co ...

Align the inner div in the center of the outer div, even when the outer div does not

I'm attempting to make sure the tail of the speechbubble aligns with the center of the image, regardless of their respective heights. Essentially, I want the image to always be centered within the current height of the wrapper, similar to how the spee ...

Is there a way to open a link in a new window without using the _blank attribute?

I am facing an issue where I have a webpage with a URL linking to a PHP file that displays an image, and I want to open this picture in a new window without the blank page showing up. Currently, when I click on the URL using the code below, a new window o ...

Protractor's isDisplayed method may return a false value for an element that is actually visible

UPDATE #4: Eureka!! I made a breakthrough by recursively navigating through the parent nodes and returning the same values as shown below. Surprisingly, one of the parent nodes - the inner mat-drawer-container - also returned false for isDisplayed, while ...

Navigation drop-down extending beyond the boundaries of the screen

On the right side of react-bootstrap's Navbar, there is a Dropdown menu: <Nav className="container-fluid justify-content-end"> <NavDropdown alignRight title="Dropdown" flip> <NavDropdown.Item href="#action ...

html - automatically populating input fields when the page loads

Currently, I have an HTML form embedded in the view and I am looking for a way to automatically populate specific input fields with json variables obtained from the server. Instead of manually writing JavaScript code for each field, my goal is to access th ...