Image taking up the full width placed within a container with a set width dimension

https://i.sstatic.net/d1WWJ.png

I am trying to make sure that the images expand to fill the entire width of the div they are placed in.

Mainly using Bootstrap 4 for styling, but also incorporating some additional elements...

<div class="row py-5">
    <div id="div-sillar" data-aos="fade-up" data-aos-duration="2000" class="col-sm tarjeta mx-4 text-center mt-2">
        <div class="fll">
            <img class="rounded img-fluid margin-left" src="../../html/assets/media/index/productos-sillar.webp" alt="Sillar y Cantera Sillar">

        </div>
        <h4 class="text-center text-uppercase my-3">sillar</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open ">Tenemos una gran variedad de colores, capacidad de producción para cualquier tamaño de proyecto y una calidad y precio
            que hace que nuestros aliados nos elijan.</p>
    </div>
    <div id="div-cantera" data-aos="fade-up" data-aos-duration="2500" class="col-sm tarjeta mx-4 text-center mt-2">
        <img class="rounded img-fluid" src="../../html/assets/media/index/productos-cantera.webp" alt="Sillar y Cantera Cantera">
        <h4 class="text-center text-uppercase my-3">cantera</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open">
            No solo son bloques de sillar también tenemos diferentes productos de cantera de excelente gusto y gran calidad.
        </p>
    </div>
    <div id="div-flete" data-aos="fade-up" data-aos-duration="3000" class="col-sm tarjeta mx-4 text-center mt-2">
        <img class="rounded img-fluid" src="../../html/assets/media/index/productos-sillar.webp" alt="Sillar y Cantera Flete Logística">
        <h4 class="text-center text-uppercase my-3">flete y logística</h4>
        <hr class="estilo">
        <p class="text-justify fuente-open">
            Atendemos y enviamos a toda la república mexicana tenemos proveedores competitivos de logística para tu proyecto. nosotros
            nos encargamos.
        </p>
    </div>
</div>
htmlcssbootstrap-4

Answer №1

To achieve a full-width image, remove padding from the columns and set the image width to 100%. However, it is crucial to assign a fixed height to the image to prevent the height from increasing disproportionately in order to maintain the aspect ratio. If you desire padding for text within boxes, create an additional div for the text content and apply margin left and right accordingly.

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

What is the process for choosing an element, wrapping it in a <div>, and appending a class to it using only JavaScript?

When constructing a responsive website, all CMS entries are in markdown. It's not feasible to manually code the div into each new entry, so dynamic class addition is necessary. The task at hand involves selecting an <img> within a post and wrap ...

javascripthtmlcss

Could there be a scenario where the body onload function runs but there is still some unexec

I am feeling confused by a relatively straightforward question. When it comes to the <body> tag being positioned before content, I am wondering about when the body onload function actually runs - is it at the opening tag or the closing tag? Additio ...

javascripthtmlonload

Use jQuery to delete the parent div when the element inside does not contain a specific class

I'm dealing with a grid that has 3 columns, each sharing the same div class. Inside each column is a span with either the class of class="simplefavorite-button" or class="simplefavorite-button.active". Here's how the markup looks: <div class= ...

jqueryhtmlcss

Function that is triggered by scrollbar height indicator

I'm currently utilizing jQuery to retrieve the user's current height and triggering an animation function once they reach that height (similar to reactive websites where animations occur as the user scrolls down the page). However, I am struggli ...

javascriptjqueryhtmlcss

Maintaining a 3-column grid layout on mobile devices using Bootstrap 4

How can I display 3 columns per row on mobile, desktop, etc. devices? Currently, only 1 column is shown per row on mobile. <div class="container"> <div class="row"> <div class="c ...

twitter-bootstrapbootstrap-4bootstrap-grid

The use of <a href> with images is not supported in Chrome

Hello there, I have a .NET C# function that generates HTML image links like this: <a href="..."><img src="..." /></a> These are displayed using asp:literal. Everything seems to be working fine in Internet Explorer and Firefox, but when ...

asp.nethtmlgoogle-chrome

disregard the background styling applied to the parent element with the class of `.wrapper`

I am completely new to all of this, so please bear with me. Here's my current situation: So, I've set a background image for the entire body of my website. I have a div called .wrapper that I use on all of my pages. Its main purpose is to keep m ...

htmlcss

What is the best way to have the sidebar of a webpage slide out over the main body content that is being displayed?

Issue Summary I am experiencing an issue with the positioning of my sidebar, which is initially located 66% offscreen using -translate-x-2/3. The sidebar is meant to be pulled into view onmouseover, however, the main body content remains stuck in place. I ...

javascripthtmltailwind-css

Checkbox designed in a non-traditional style that requires a label in order to complete the

My Bootstrap modal features multiple-choice options for users, presented as checkboxes. However, I want to customize the appearance so that when a user selects an option, it is highlighted rather than shown as a checkbox. To achieve this look, I enlarged ...

csstwitter-bootstrapangular-bootstrap

Trouble arises when Bootstrap modal fails to display for IDs exceeding 1000

I'm facing an issue with a table that has hundreds of rows. I have assigned a td tag with a modal, but I've noticed that the modal doesn't show up when the id is greater than 1000. Here is how I've set up my data target in the td tag: & ...

htmlbootstrap-modalbootstrap-5

Transform the infoBox into a jQuery dialog modal window

In this section, I have integrated a map with markers and infoBoxes. My goal now is to replace the infoBoxes with jquery dialog() and modal window functionalities. How can I achieve this effectively? Below is the code snippet that includes the implementat ...

javascriptjquerycssjquery-uijquery-ui-dialog

On mobile, three divisions that are initially set to occupy 33.33% of the width each will expand to 100

I have a good handle on accomplishing this using JavaScript, but I'm now curious if there is some clever CSS trick that can achieve the same result. My goal is to have each div take up the entire screen when viewed on a mobile device. Below is what it ...

javascriptjqueryhtmlcss

How can we stop the navigation submenus (ULs) from appearing as if they are floating?

I've created a navigation bar with an unordered list consisting of smaller unordered lists, each with the class "subnav". When the screen is small, the navigation collapses and the menus stack on top of each other. I want the navigation to maintain i ...

htmlcssnavigationpositionhtml-lists

Issue with CSS styles (td and p elements) not being applied in emails sent from MS Outlook through Gmail Android & iOS App

My email is sending perfectly from MS Outlook (2013), but in the GMail app for Android (also happening on iOS) there seems to be an unwanted gap between lines. It's known that MS Outlook changes the HTML upon sending the email, which can be viewed by ...

htmlcssemailoutlookgmail

How to trigger the submission of a form within the submission event of another form using jQuery

I am encountering an issue with having two forms on a single page. Whenever I click on the submit button of the parent form, the parent form's submit event is triggered. In this event, I have included logic to submit the second form using the submit m ...

jqueryajaxhtmlform-submit

When using Owl Carousel in Chrome, the carousel unexpectedly stops after switching tabs

Hi there, I'm currently testing out the auto play feature in owl carousel. One issue I've encountered is that when I switch to another tab in Chrome and then return to my webpage with the carousel, it stops functioning unless I manually drag the ...

javascriptjqueryhtmlcssowl-carousel

Modifying a variable when a specific number of elements are clicked using jQuery

I have created a script for my portfolio that is functional but I want to streamline it so that I only need to edit the HTML, not the script itself. The main requirements for the code are: Count the number of <img> tags within the element with id ...

jquerycssvariables

Have you ever wondered why Vue 3 imports all JS files for every page upon the initial project load?

Is there a way to make Vue 3 import only the necessary js files for each component instead of loading all files at once when the project is first loaded? For example, if I navigate to the contact page, Vue should only import the contact.js file, rather tha ...

javascripthtmlvuejs3

The span is unresponsive

When focusing on an input or checking its validity, the span should move up but it's not responding to any styles. <div class="login"> <span class="logtxt">Username or email</span> <input type=& ...

htmlcss

Is there a way to create a table with "cells that can be controlled individually" similar to the image provided using HTML and CSS?

I have been searching online for solutions on how to create a table similar to the one in this image, but so far I haven't had much luck. I attempted to use colspan, however, it didn't yield the results I was hoping for. Does anyone have any alt ...

htmlcss