Guide to creating responsive images within a list using inline-block styling

I'm facing an issue where I have 3 images with different widths and need to keep them intact until they reach a certain width, let's say 767px. Once they hit that width, each image will take up the full width of 767px until the screen size is xs. Sorry if this sentence construction is confusing.

Here's a snippet of the code:

<div class= "about-content">

    <ul>

        <li><a href="">
            <div class = "inner-content">
                <img src="img/about/1.jpg" class="img-fluid">
            </div>
        </a></li>

        <li><a href="">
            <div class = "inner-content">
                <img src="img/about/2.jpg" class="img-fluid">
                <div class = "overlay-content">
                    <h4>Book a Test Drive <i class = "fa fa-chevron-circle-right"></i></h4>                                 
                </div>
            </div>
        </a></li>

        <li><a href=""><img src="img/about/3.jpg" class="img-fluid"></a></li>

    </ul>

    <ul>

        <li><a href=""><img src="img/about/4.jpg"></a></li>
        <li><a href=""><img src="img/about/5.jpg"></a></li>
        <li><a href=""><img src="img/about/6.jpg"></a></li>

    </ul>

</div>
htmlcsstwitter-bootstraptwitter-bootstrap-4responsive-images

Answer №1

Using the vw (viewport width) measurement will cause the images to expand. To adjust for their initial positioning, set a calculation like width: calc(100vw - 70px)

Check out this code snippet:

img {
  width: 200px;
  height: 50px;
}

@media screen and (min-width: 767px) {
  img {
    width: calc(100vw - 70px);
  }
}
<div class="about-content">

  <ul>

    <li>
      <a href="">
        <div class="inner-content">

          <img src="img/about/1.jpg" class="img-fluid">
        </div>


      </a>
    </li>
    <li>
      <a href="">
        <div class="inner-content">
          <img src="img/about/2.jpg" class="img-fluid">
          <div class="overlay-content">
            <h4>Book a Test Drive <i class="fa fa-chevron-circle-right"></i></h4>
          </div>
        </div>


      </a>
    </li>
    <li>
      <a href=""><img src="img/about/3.jpg" class="img-fluid"></a>
    </li>

  </ul>
  <ul>

    <li>
      <a href=""><img src="img/about/4.jpg">

      </a>
    </li>
    <li>
      <a href=""><img src="img/about/5.jpg">

      </a>
    </li>
    <li>
      <a href=""><img src="img/about/6.jpg"></a>
    </li>

  </ul>

</div>

Answer №2

To ensure all images have a responsive width globally, you can simply add the following code to your CSS file or inline style within the body tag:

<body style="img{width:100%;height:auto;}">

Another method in the CSS file is:

img
{
width: 100%;
height: auto;
}

You can adjust the percentage value as needed to achieve the desired effect.

It's also recommended to learn more about @media queries

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

using an SVG mask declared in HTML to apply masking

I've been experimenting with masking using an SVG shape that I created in the HTML content. I've tried various options: mask, -webkit-mask mask-image, -webkit-mask-image different MaskUnits and MaskContentUnits mask-type: luminance or not Desp ...

htmlcsssvgmask

The color of the link refuses to change

The link text is displaying in a persistent purple color, despite my attempts to change it to white. I have experimented with adding nav:link and nav:active, but the text reverts to the default color without any CSS styling applied. I have included the fo ...

htmlcss

Assess the scss styles specific to components following the global min.css in a React application

ISSUE Imagine we have a min.css file that needs to be imported globally: index.js import ReactDOM from "react-dom"; import App from "src/App"; import "library/library.min.css"; ReactDOM.render(<App />, document.getE ...

javascriptcssreactjsperformancesass

Implementing jQuery for form validation

I am facing an issue with validating an HTML page using jQuery. Despite having a simple layout, the textboxes are not being validated. Here is the code snippet: <link rel="stylesheet" type="text/css" href="style.css" /> <script type="text/javas ...

phpjqueryhtmlvalidation

Dropdown box triggered by button

Currently working on coding a stylish button using CSS and HTML. The goal is for the button to drop down and reveal a hidden text box upon being clicked. Check out this image for reference: ...

htmlcssbuttonclickdropdown

Implementing CSS styles according to user preferences. Switching between dark mode and light mode based on subscription

Is there a way to dynamically change CSS property values based on user interaction, such as toggling between dark mode and light mode? I am currently exploring the option of setting up a subscription to track these changes, but I want to know how I can act ...

javascripthtmlcssangular

I wish to substitute a form field with a different one once the value of another field matches a specific condition

The issue I'm facing is that the field disappears once "US" is chosen and does not revert back to the options when another choice is made. teacher_signup.html {% block content %} <h2>Sign Up As Teacher</h2> <form method="post> ...

javascriptjqueryhtmldjangoforms

Incorporate new content into JavaScript using the input element

I have a unique question - can text be added to JavaScript using the input tag? For example, <input type="text" id="example" /> And let's assume the JavaScript function is: function display_text() { alert("The text entered in #example wi ...

javascripthtmlforms

Submitting information via jQuery

https://i.stack.imgur.com/VU5LT.jpg Currently, I am working on integrating an event planner into my HTML form. However, I am facing difficulty in transferring the data ("meetup", "startEvent", "break") from HTML to my database. Using jQuery, I was able to ...

javascriptjqueryhtml

What is the best way to assign classes to dynamically generated elements within a loop?

I have used a loop to create multiple components <li v-for="card in cardID" :key="card"> <app-profile class="profile" :id="cardID[i++]"></app-profile> </li> My goal is to wrap all these c ...

javascripthtmlcssvue.js

Can anyone provide guidance on locating the parent of a pseudo element with Selenium WebDriver?

Is there a way to retrieve the parent web element of a pseudo element (if we can call it the parent) using JavaScript? I know that Selenium's methods for searching for web elements are not suitable for pseudo elements, but JavaScript does allow manipu ...

javascriptcssselenium

Foundation 6 off-canvas-menu does not conceal the page that is currently visible to the user

I am currently working on a small viewport off-canvas menu using Foundation 6, but I am having trouble making it overlap the entire visible page area. The right-hand side underneath the off-canvas menu does not have background opacity. https://i.sstatic.n ...

javascriptjqueryhtmlcsszurb-foundation

Extension Overlay for Chrome

I'm currently working on developing a Chrome extension, but I'm encountering some confusion along the way. Despite researching online, I keep receiving conflicting advice and haven't been able to successfully implement any solutions. That&ap ...

javascriptjqueryhtmlcssgoogle-chrome

Adding text in front of an input field can be achieved by using the placeholder attribute

I'm struggling to insert text on the left side of an input field and beneath a label. Working with Bootstrap 4.3.1, my HTML code appears as follows: <div class="col-lg-6 col-md-6 col-sm-6"> <!-- some markup in here --> </div& ...

htmlcssbootstrap-4

Result array, employed as an input for auto-suggest functionality

I’m currently working with an array where I am iterating over an object from an API endpoint that is in stdClass format: foreach($searchResults->hits as $arr){ foreach ($arr as $obj) { $fullType = $obj->_source->categories; print_r($fu ...

javascriptphphtmlarraysautocomplete

Is there a way to create a table using Jquery based on user input?

I'm trying to create a table for user inputs and classify them, but I'm having issues with the layout. When multiple inputs are added, they display in an awkward way. I've experimented with different methods, but the problem remains. Can som ...

javascriptjqueryhtmlhtml-tableuser-input

The CSS star rating system is malfunctioning

I'm struggling to implement a rating star system in my project. I have experimented with various code snippets, but none seem to be functioning properly. Take a look at the outcome: https://i.sstatic.net/g3DvH.png ...

javascriptangularjstwitter-bootstrapcss

Customize the color of a Bootstrap btn-group

Is there a way to modify the background color of the active or selected button within a button group? <div class="btn-group" role="group" aria-label="Basic radio toggle button group"> <input type="radio" c ...

htmlcsstwitter-bootstrap

Is there a way to achieve a flex layout without having to modify the HTML structure?

I am working on achieving a specific layout using CSS: https://i.stack.imgur.com/xg7ZA.png This is the HTML structure I have and it cannot be altered, along with what I have managed to add with CSS. It's almost there but missing something: .conta ...

htmlcssflexbox

HTML fields that are serialized as deeply nested JSON objects

Currently, I am working on a Java REST web service that handles POST data from a basic HTML form. My goal is to ensure that the client code sends the correct JSON to the web service in order for the server code to populate my objects accurately. The data ...

javajavascripthtmljsongson