What is the best way to ensure that images of different sizes are seamlessly integrated with text?

I am in the process of creating a bootstrap website and my initial focus is on designing the mobile version. I am aiming to align images (positioned on the left) with text (located on the right). So far, I have successfully achieved this layout using square images with a 1:1 aspect ratio. However, when I attempt to use images of different sizes, the alignment becomes distorted. Below is an example of the code I am currently working with:

<div class="container">
<div class="row">
    <div class="col-xs-4">
        <img src="image.jpg" class="img-responsive">   
    </div>

    <div class="col-xs-8">
            <ul class="list-unstyled invinfo">
                <li class="heading"><h5>Main title of page</h5></li>
                <li>Some details about the page</li>
                <li>More details</li>
            </ul>    
    </div>
</div>
</div>

The design I am trying to achieve can best be described as resembling Amazon's mobile app, particularly the layout displayed for search results.

htmlcsstwitter-bootstrap

Answer №1

To achieve a responsive design, consider starting with this approach: set a fixed width for images and let the text determine the height.

An added convenience is including inline style background-image to manage all content in the markup.

The advantage of this method is that regardless of the image's dimensions, it will scale proportionally and maintain its ratio.

.container {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  border: 1px solid #ccc;
  vertical-align: top;
  height: 140px;
}
.cell.image {
  width: 140px;
  height: auto;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain; 
}
.cell.image img {
  max-width: 100%;
  width: auto;
  height: 100%;
}
<div class="container">
  <div class="row">
    <div class="cell image" style="background-image: url('http://placekitten.com/450/300')">      
    </div>
    <div class="cell text">
      <ul class="list-unstyled invinfo">
        <li class="heading"><h5>Main title of page</h5></li>
        <li>Some details about the page</li>
        <li>More details</li>
      </ul>    
    </div>
  </div>
  <div class="row">
    <div class="cell image" style="background-image: url('http://placekitten.com/300/450')">      
    </div>
    <div class="cell text">
      <ul class="list-unstyled invinfo">
        <li class="heading"><h5>Main title of page</h5></li>
        <li>Some details about the page</li>
        <li>More details</li>
      </ul>    
    </div>
  </div>  
</div>

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

Are HTML/CSS/JavaScript adjustments made after DOM loading taken into consideration in Google search results?

When searching on www.google.com, do the listings display content directly from the original HTML page load or do they also consider any front-end CSS / JavaScript stylings/adaptations? -- In a hypothetical scenario, let's examine the following ques ...

jqueryhtmlcssseosearch-engine

Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask. Attached is an image that illustrate ...

csshovermaskclipping

Struggling to properly position my dropdown menu without causing the div content to shift downward

<div id="header"> <a href="#" id="logo"></a> </div> <div id="nav_cont"> <ul id="nav"> <li id="main_btn"><a class="mainlink" href="#">Parent 01</a></li> <li id="communities_btn">< ...

css

Eliminate image line breaks associated with hyperlinks without the need for table cells

My webpage includes a <div> with various images: <div> <img src="pic1.jpg" /> <img src="pic2.jpg" /> <img src="pic3.jpg" /> </div> However, whenever I add a hyperlink to any of the images, it causes an unwante ...

htmlcss

Employing setInterval() without clearing previously triggered events

Can someone clarify the distinction between these two functions: function displayTime(){ var current = new Date(); var hours = current.getHours(); var minutes = current.getMinutes(); var seconds = current.getSeconds(); ...

javascripthtmlsetinterval

Container size is not accommodating elements

Currently in the process of developing a login page and utilizing @media for improved CSS layout on mobile devices. https://i.sstatic.net/LM8q8.png. The issue is that despite implementing @media rules, the inputs and buttons are not extending to the full w ...

htmlcss

What is the best way to implement a reusable HTML navbar across multiple pages of my website?

I have incorporated Bootstrap 4 into my website design. Currently, I'm including the same navbar code on every page. However, whenever I need to update the navbar, I find myself copying and pasting the code across each page. Is there a way for me to ...

jqueryhtmlbootstrap-4navbar

Is your Javascript navigation functioning properly on some submenus while encountering issues on others?

If you visit , you'll notice that it's a visually appealing site. The navigation submenus seem to be functioning properly, HOWEVER upon inspecting the element, you'll notice that under the PRICING tab, there are submenus that have the same c ...

javascripthtmlcss

The image tag disrupting the spacing between lines

Here's a snippet of the css and html code: CSS: div { height:24px; line-height:24px; } HTML: <div><img src="image.png"/>Text</div> According to the code, a div should be 24 pixels high with text vertically centered after ...

htmlimagecss

Add a hyperlink to a div element without directly editing the HTML code

Is it possible to add a link to the div using JavaScript instead of changing the HTML and inserting an <a>-tag? <div class="some-class">Some content</div> ...

jqueryhtmlhyperlink

Deactivate zoom on the viewport and display the entire page

Hello, I am currently working on my website www.ecogo.io and I am trying to get the entire page to display instead of just a portion. However, I am encountering an issue where the page loads zoomed in on mobile browsers like Chrome for Android, whether Des ...

csshtmlviewport

Retrieve user input from an HTML form and pass it as a parameter in a jQuery AJAX request

Is there a way to pass a value from a user input in an HTML file to jQuery.ajax? Take a look at the code snippet from my JS file: jQuery(document).ready(function() { jQuery.ajax({ type: 'POST', url: 'myurl.asp ...

javascriptjqueryhtmlajax

Determine whether the textfield is a number or not upon losing focus

I'm seeking advice on implementing a feature using jQuery and JavaScript. I want to create a text field that, when something is inputted, will automatically add .00 at the end if it's only a number. However, if someone inputs something like 2.00, ...

javascriptjqueryhtmlfocusout

Replace character within a table using jQuery

Below is the table content: <table> <tr> <td>"James"</td> <td>"do"</td> <td>"you</td> <td>"like</td> <td>"your life"</td> </tr> </table> <butt ...

javascriptjqueryhtml

Assign the input text field's value programmatically in the code-behind of a C# Asp.net application

I am attempting to change the value of an HTML input field from C# code behind. These inputs are created through a JavaScript loop, so I have not had much success using run at server or assigning values through <%= %>. Below is my script: var mytab ...

javascriptc#jqueryasp.nethtml

I am looking to expand the width of the Bootstrap container specifically for the Max width

I need to adjust the width of the Bootstrap container to be responsive on all devices, especially maximizing the width on larger screens. Can anyone provide guidance on how to achieve this? Thank you in advance. To view my website, please follow this link ...

htmlcssbootstrap-4

Display the remainder of an image's height within a div container

Here is the code snippet I am working with: HTML: <div id="mapWrapper" style="height: 624px;"> <div class="box" id="map"> <h1>Campus</h1> <p>Description Campus Map.</p> <img src="abc.png" ...

htmlcss

Insert a clickable element within an HTML document

I have an idea for a questionnaire that includes questions and an interactive element at the end. At the completion of the questionnaire, there will be a button labeled "display answers" which users can click to reveal the correct responses. For example, ...

javascripthtmlcss

What is the best way to interpret numerous rows of Form elements simultaneously?

What is the most efficient way to name form elements across rows for easy conversion into JSON format? Considering HTML does not have built-in Array support, what alternative method should be used? In each row, there are 2 text fields and 1 select dropdow ...

javascriptjqueryhtmljson

Swap the displayed text in a textbox within an HTML5 document

Is there a way to replace specific text in an HTML5 document? Let's say the user inputs: My name is Toni. I want to change the output text "Toni" to Ani, so the final output is: "My name is Ani". This is the current code I have: <title>tex ...

javascriptjquerycsshtml