Adjust the size of images that are aligned horizontally using HTML

Question

Adjust the size of images that are aligned horizontally using HTML

I am facing a simple issue that I just can't seem to solve. My problem involves two images aligned horizontally within a div container. Each image has specified width, minimum and maximum widths, while the parent div's width is set to 100%. How can I make both images scale down proportionally when the parent width is reduced to 50% based on the screen width? Here is an example:

<!-- screen resized to 110px in width -->
<div style="width:100%; display:block">
  <!-- actual image width is 200px -->
  <img src="i.png" style="width:100%; min-width:100px; max-width:200px">
  <img src="i.png" style="width:100%; min-width:100px; max-width:200px">
</div>

The current setup causes the second image to be pushed down if the parent container cannot accommodate it horizontally. Setting white-space to nowrap keeps them inline but does not scale them down. Can anyone provide some assistance with this issue?

html css image

Answer 1

Answer №1

Are you looking for a similar solution?

Here is the demo on jsFiddle: http://jsfiddle.net/jplahn/4h9Vy/

Feel free to adjust the width of the parent container in the provided jsFiddle.

Snippet of HTML code:

<div id="parent">
  <!-- the actual image width is set to 200px -->
  <img class="image" src="i.png" >
  <img class="image" src="i.png" >
</div>

Corresponding CSS styles:

.image {
    display: block;
    float: left;
    max-width: 200px;
    width: 50%;
    position: relative;
}

#parent {
    overflow: hidden;
    width: 100%;
    display: block;
}

Answer 2

Are you looking for a similar solution?

Here is the demo on jsFiddle: http://jsfiddle.net/jplahn/4h9Vy/

Feel free to adjust the width of the parent container in the provided jsFiddle.

Snippet of HTML code:

<div id="parent">
  <!-- the actual image width is set to 200px -->
  <img class="image" src="i.png" >
  <img class="image" src="i.png" >
</div>

Corresponding CSS styles:

.image {
    display: block;
    float: left;
    max-width: 200px;
    width: 50%;
    position: relative;
}

#parent {
    overflow: hidden;
    width: 100%;
    display: block;
}

Answer 3

Answer №2

To ensure the images maintain a minimum width of 100px, it is important to note that if the width of the div falls below 200px (specifically 110px in this case), the second image will move to the next line. If you wish to reduce their size, consider removing the min-width: 100px property from the images and instead setting their width to 50%. This way, with a width of 100%, they will adjust according to the parent container.

Furthermore, there is an opportunity for optimization in your code. The rules width:100%; display:block are redundant as these are default settings for all block elements, including div.

Feel free to experiment with the suggested modifications here: http://jsfiddle.net/TMyr9/2/

Answer 4

To ensure the images maintain a minimum width of 100px, it is important to note that if the width of the div falls below 200px (specifically 110px in this case), the second image will move to the next line. If you wish to reduce their size, consider removing the min-width: 100px property from the images and instead setting their width to 50%. This way, with a width of 100%, they will adjust according to the parent container.

Furthermore, there is an opportunity for optimization in your code. The rules width:100%; display:block are redundant as these are default settings for all block elements, including div.

Feel free to experiment with the suggested modifications here: http://jsfiddle.net/TMyr9/2/

Adjust the size of images that are aligned horizontally using HTML

Answer №1

Answer №2

Similar questions

Calculating the number of checked checkboxes using PHP and HTML

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

Is the jQuery popup malfunctioning? It appears to be stuck within a div

The order in which jQuery is loaded can impact the layout of

`inline-block elements are centered when displayed in Firefox`

What is the method for setting the I-bar cursor when text is being hovered over with custom cursors in use?

Add class or id dynamically when clicked

Is it possible to use traditional form submission after dynamically adding an HTML control with JQuery?

Tips on triggering ng-click event before the page finishes loading

The foundation grid system is not being implemented

The navigation bar isn't turning into a hamburger menu - using bootstrap and Flask

Shifting image from center to corner as you scroll

Refresh the CSS inheritance and hover effects

I am looking to enhance my email subscription form by incorporating a URL into the subscription button, all while ensuring that the email subscription function in the HTML remains fully operational

The background image is not displaying as expected

IE displays div height differently compared to Firefox and Chrome

Items within a shared container are currently displaying stacked on top of each other

Tips for creating gaps between list items in a collapsible navbar

Picture failing to display in Gmail email message after sending it from ASP.NET using C# NET.Mail as the email body

Here is a guide on determining the date variance in PHP by leveraging jQuery