Tips for enlarging an image within a 6 column class size

I'm having trouble making my image stretch to the full width, all the way to the right corner while still being responsive. The code is integrated into WordPress and you can find the image in the class membershipImgBox. How can I increase the size of my image?

Here is the code:

.membershipbox {
  height: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
  <link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
  <!-- for icons -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="84e6ebebf0f7f0f6e5f4a9ede7ebeaf7c4b5aab0aab5">[email protected]</a>/font/bootstrap-icons.css" />
</head>
<section class="deliveringSection ">
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
        <div id="img-2" class="membershipImgBox">
          <img src="https://via.placeholder.com/987/FF0000/FFFFFF?Text=Down.com%20C/O%20https://placeholder.com/" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" />
        </div>
      </div>
      <div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
        <div class="deliveringContent">
          <div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
            <h2>
              Delivering quality projects to
            </h2>
          </div>
          <div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
            <h2><b>World Class </b></h2>
            <h2>Standards</h2>
            <div class="about-border"></div>
          </div>
          <p>We work around three important elements of our business to create world-class innovative interior design solutions to meet our clients’ functional & aesthetic requirements providing unique tailored space solutions. We integrate the client’s
            brand and business strategy, placing great emphasis on the brand’s values and aspirations to bring projects to fruition, taking our strong working relationship to the next level..​​</p>
          <a href="" class="btn btn-primary btnWeight"> about us </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

htmlcsswordpressbootstrap-4wordpress-theming

Answer №1

Since the image is contained within a specific class that has a max-width and margin set, it will stay within its container without overflowing.

If you want the image to stretch to the edges of the page, you can place it outside of the container.

.membershipbox {
  height: 100%;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
      <link rel="preconnect" href="https://fonts.gstatic.com">
      <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap" rel="stylesheet">
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
      <!-- for icons -->
      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d9bbb6b6adaaadabb8a9f4b0bab6b7aa99e8f7edf7e8">[email protected]</a>/font/bootstrap-icons.css" />
    </head>
<section class="deliveringSection ">
<div id="img-2" class="membershipImgBox">
          <img src="https://via.placeholder.com/987x612" class="img-fluid d-block mb-5 mb-lg-0 mx-auto" alt="" />
        </div>
  <div class="container">
    <div class="row">
      <div class="col-lg-6 col-xs-12 img-box-2" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
        
      </div>
      <div class="col-lg-6 col-xs-12 order-lg-first" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
        <div class="deliveringContent">
          <div class="sectionHeading" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
            <h2>
              Delivering quality projects to
            </h2>
          </div>
          <div class="sectionHeadingTwo" data-aos="fade-up" data-aos-easing="ease" data-aos-duration="2000">
            <h2><b>World Class </b></h2>
            <h2>Standards</h2>
            <div class="about-border"></div>
          </div>
          <p>We work​​</p>
          <a href="" class="btn btn-primary btnWeight"> about us </a>
          </p>
        </div>
      </div>
    </div>
  </div>
  </div>
</section>

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

TinyMCE generates HTML code with embedded tags

Hey there, I'm currently facing an issue with TinyMCE that I just can't seem to solve. I've browsed through some related posts but haven't found a solution that works for me... For example: When I input something in my back office, ...

javascriptphphtmlencodingtinymce

I am completely baffled as to the origin of this mysterious stylesheet in my Wordpress PHP code

I have been encountering an issue while updating my website where the original stylesheet seems to be persistent despite my efforts to replace it. I replaced the style.css file in my bluehost control panel and removed any custom css settings, but the old s ...

phpcsswordpress

As jQuery animates, the navigation bar gracefully descends

I've been immersing myself in learning HTML, CSS, and jQuery for the past ten days. Building my first website has been a fun challenge, allowing me to experiment with different elements. One of my recent experiments involved creating an animation for ...

jqueryhtmlcss

Issues with JavaScript and CSS functionality not functioning correctly as expected

There seems to be an issue with the order of HTML elements in the following code. When I place the div with the class thumb-bar before the full-img div, the JavaScript functions correctly. However, if I switch their positions, the JavaScript functionalitie ...

javascripthtmlcss

Why does the font-awesome CSS file fail to work while the font-awesome CDN is successful?

I've noticed that when using the font-awesome CSS file, the icons do not display properly. However, when I use the CDN and keep all the code the same, it works perfectly. Can someone explain why this happens? Here is my code: <!DOCTYPE html> < ...

htmlcssfont-awesome-4

Which design pattern does Bootstrap v4 utilize for handling click events?

Trying to decipher this code snippet: $(document).on( Event.CLICK_DATA_API, Selector.DISMISS, Alert._handleDismiss(new Alert()) ) This particular piece is related to the Alert component: https://github.com/twbs/bootstrap/blob/v4-dev/js/src/alert.js I a ...

javascriptdesign-patternsbootstrap-4

Aligning msform using CSS

Can someone assist me with centering the form (#msform, #msform fieldset) on all browsers while also keeping the image within the border and ensuring that the form does not extend beyond the right border? JSFiddle #msform { width: 1200px; margin: ...

javascripthtmlcss

Using CSS and Jquery to apply a CSS class to a popup window

I've been attempting to assign the CSS class .dialogStyle to a dialog box, but for some reason, it doesn't seem to be taking effect. <!doctype html> <head> <meta charset="utf-8" /> <title>Test</title> <link r ...

jquerycssdialog

Angular: Streamlining Pagination using Bootstrap Styles

I need help with adding pagination to my table. I've been following the instructions on this link: Pagination Tutorial However, I encountered an error while trying to use map(product,i). The specific error message is: Property 'map' does ...

angularbootstrap-4pagination

PHP Code for Removing Selected Entries

Is it possible to delete specific records from a table? For example, if I have records in my table like this: Monday | Tuesday | Wednesday IT | IT | IT When I delete "IT" from any day, all instances of "IT" are deleted from all days. However, I ...

phphtmlmysqlcss

Some examples of CSS styling that makes the parent element shorter than the child element

Currently, I am engaged in a project aimed at enhancing my understanding of Spring MVC practices. As part of this endeavor, I have embarked on the development of a simplified version of Twitter. Essentially, users can log in, share brief updates, and view ...

htmlcssstyles

Using Selenium in Python, identify and choose a class

Hello, I am currently working on automating a process using selenium, python, and GLPI. I have been struggling with selecting a user from a menu bar, despite trying various methods like linkText, cssSelector, and xpath. I suspect I may be doing something w ...

pythoncssseleniumwebdriver

How can I position the label at the top?

Visit this jsfiddle link Is it possible to align the label on top and select at the bottom within the given HTML structure as shown in the picture? <div class="col"> <label for="foo">Select:</label> <select id="foo" name="select"> ...

css

Issue with connecting the 'Enter' key to the button - no success

My current setup involves using jQuery to link the Enter key to an HTML button through this code snippet: $("#console").keyup(function(event){ if(event.keyCode == 13) { $("#submit").click(); } }); HTML: <input autocomplete="off" type= ...

jqueryhtmlbuttononkeyup

Proper alignment of multiple elements with Bootstrap

I am currently incorporating Bootstrap panels into my project, and I have a design mockup that looks like this: https://i.sstatic.net/pHArl.png The Profile text and progress bar need to be aligned to the left, while the collapse icon should be aligned to ...

htmlcsstwitter-bootstrap

The functionality of the Bootstrap dropdown or radio input type is not functioning correctly

I'm currently utilizing electron([email protected]) along with bootstrap([email protected]). Whenever I attempt to incorporate a dropdown or other components from Bootstrap, they simply do not function. I am unsure of what mistake I might ha ...

javascripthtmlelectronbootstrap-5

The jQuery function triggers in the console upon first click but does not display in the browser. However, it shows up twice in the browser upon

I'm quite puzzled by this issue. In my javascript file, the jQuery functions (including the one located at the end of the page) seem to skip the first click event and respond twice on the second click. I am also utilizing Bootstrap in my project. App ...

javascriptjqueryhtmltwitter-bootstrap

SCSS - Hide div1 when div2 is hovered over

In an attempt to make a div disappear when hovering over another div using only CSS, I have set up two divs: <div class="" id="target">I will disappear</div> <div class="hover_box">Hover me</div> Here is my SCSS code: #target { ...

javascriptjqueryhtmlcsssass

After refreshing the page, RouterLinkActive in Angular 6 fails to work

Scenario In my application, there is a menu with various items. The selected item is distinguished by adding the selected class to it, which changes its appearance. https://i.sstatic.net/JEPHH.png Problem While navigating between routes works smoothly, ...

htmlangulartypescriptangular6

What is the best way to keep an image fixed at the top while scrolling, but have it disappear when the page reaches the footer?

I am in need of creating a unique Bootstrap 4 layout that involves an image staying fixed to the top after scrolling down until it reaches the bottom of the header. When the page is further scrolled down and the footer comes into view, the image should sta ...

jquerycsstwitter-bootstrap