Images that dynamically adjust within the confines of a single div

My issue involves a simple script that includes two responsive images. When the window is minimized, the images adjust accordingly.

However, when I place both images within the same div like this:

<div class="wrapper">
      <div class="block">
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
        <img
          src=
            "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg"

        ></img>
      </div>

    </div>

I am not achieving the desired effect. Can you help me understand why?

https://jsfiddle.net/zqgy89k7/

htmlcssresponsive-images

Answer №1

When the width of each image is set to 100%, they do not scale properly. Setting the width to 50% allows them to scale correctly, while also maintaining proportions by setting the height to auto.

Here's an example:

.wrapper {
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  border: solid red;
}

.block {
  display: flex;
  width: 100%;
  border: solid blue;
}

.block img {
  width: 50%;
  max-width: 400px;
  height: auto;
}
<div class="wrapper">
  <div class="block">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
    <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__340.jpg">
  </div>
</div>

Answer №2

To solve the issue, you could simply remove the line of code heigh: 200px.

Alternatively, adding flex-wrap: wrap to the parent container of the flex items would result in a more visually pleasing layout.

Check out this example:

JS Fiddle showcasing responsive images

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

The options that are not selected in a dropdown menu will not be added to a different dropdown menu

In my application, I have 2 select boxes. When the user submits the page, only the selected students in the first select box #studentadd are appended to the second select box #studentselect. However, the unselected options from #studentadd do not get appen ...

phpjqueryhtmlajaxmysqli

Revamped styling for responsive web design

I am relatively new to experimenting with Responsive Web Design for my website. I am struggling to align the class="label" correctly after checking it on various devices. Initially, I attempted this: https://i.sstatic.net/WiBXH.jpg Initially, everything ...

csstextresponsive-designstylingtext-alignment

Is it possible to incorporate two ng-repeat directives within a single td element in a table?

The results so far Expected outcome Please advise me on how to incorporate two ng-repeats within one td. When I use a span tag afterwards, the expected result is not achieved. I have used one ng-repeat in the td and the other in a span tag, which is why t ...

javascriptjqueryhtmlangularjs

Enable compatibility with high resolution screens and enable zoom functionality

My goal is to ensure my website appears consistent on all screen sizes by default, while still allowing users to zoom in and out freely. However, I've encountered challenges with using percentages or vh/vw units, as they don't scale elements prop ...

javascriptcssresponsive-design

Hovering over the Jquery menu will display only the first child element

Hey there, newbie here looking to learn some new things. I ran into an issue where only the first child of the menu shows up when hovering over the parent element. Can anyone help me out with this problem? Please ignore the css for now. Any assistance woul ...

jquerycssjquery-ui

Looking for a straightforward way to incorporate a "Read more" and "Show Less" functionality into a Wordpress site using Javascript?

As a last resort, I am seeking a quick and simple fix. I have been experimenting with Javascript to implement a 'Read more...' & '... Read Less' feature on six different sections of a single page. The goal is to display only the fi ...

javascriptphpjqueryhtmlwordpress

"Customize your Angular application by updating the background with a specified URL

Hello there, I've been attempting to modify the background URL once a button is clicked. In my CSS, I have the following default style set up. .whole-container { background: linear-gradient( rgba(0, 0, 0, 2.5), ...

htmlcssangular

Can you please explain the primary distinction between these two identification numbers?

Can you explain the distinction between the following two css ids? p#id1 { insert code here } and #id1 p { insert code here } ...

csscss-selectors

Adjust the dimensions of input tag depending on the length of content in Angular

Is there a way to dynamically set the size of the input tag in my HTML based on the length of the ng-model value? I attempted this approach: <span>Node Path: <input for="nodeName" type="text" ng-model="nodePath" size="{{nodePath.length()}}"ng- ...

javascripthtmlcssangularjs

Setting up an image DIV for a dynamic overlay effect

Here is a JSFiddle that works correctly with fixed height and width: http://jsfiddle.net/69td39ha/2/. The animation activates correctly when hovered over. I attempted to adapt the above example to be responsive without fixed dimensions. However, I'm ...

jqueryhtmlcssanimation

Background image in Bootstrap not covering entire web page

I am facing an issue where the background image is confined within the constraints of the login panel, and I'm unsure why. My goal is for the image to span the full width and height of the browser window. Any assistance on this matter would be greatly ...

htmlcssimagetwitter-bootstrapbackground

Three fluid horizontal DIVs aligned side by side

Is there a way for me to align three divs beside each other, each with unique background images? The center div should be 989px wide, while the widths of the left and right divs can vary. ...

htmlwidthalignment

What is the best method to transfer text entered in one textarea to the output of another?

I recently picked up JavaScript again and encountered an issue while developing an app. I am struggling to pass input from one textarea to another, where the text should be converted to uppercase. I attempted to tweak code from w3, but I prefer to achieve ...

javascripthtml

Arranging React Grid Items with Stylish Overlapping Layout

Is there a way to create a react-grid-layout with 100 grid points width, while ensuring that the grid items do not overlap? https://i.sstatic.net/CQiVh.png (Reducing the number of columns can prevent overlap, but sacrifices the 100-point width resolution ...

cssreactjstypescriptreact-grid-layout

Steering your pop up to the top with CSS

Seeking advice on how to position my pop-up at the top of the page and resize it to better fit the screen. Here is where you can find my landing page: yogavoga.com/2weekdiet Grateful for any assistance provided. .modal-content { margin: 5px auto; bac ...

htmlcsspopup

PHP contact form not properly sending complete submission data

I'm facing an issue with my HTML contact form that utilizes JavaScript for a change function. Essentially, I have a dropdown menu for different subjects, and based on the selected option, specific fields should appear. However, when a user fills out t ...

phphtmlemailcontacts

Tips for securely encrypting a PHP file when combining it with an HTML file using the phpB

I am attempting to encrypt a .php file using phpBolt. It works fine when the file contains only PHP code, but it fails when there is a mixture of HTML and PHP. Here is the encryption code: <?php /** * src : source folder * encrypted : Output folde ...

phphtmlencryption

Functionality limited to Firefox browser

I'm having some trouble with my website development in HTML5 and CSS3. Specifically, I am struggling to get my processing sketch to work on browsers other than Firefox. Below is the code I am working with: <!DOCTYPE html> <html> ...

javascripthtmlcssfirefoxprocessing

The absence of a scroll bar on the web application is preventing me from scrolling properly

The vertical scroll bar on my Angular app seems to have disappeared mysteriously. I haven't made any changes to the code recently, and I'm struggling to figure out why it's missing. I've spent days trying to troubleshoot this issue with ...

htmlcssangular

Ways to implement CSS in my JQuery Plugin

In the process of creating a unique JQuery component plugin that relies on some essential default CSS for its layout, I am faced with a dilemma. Should I: Create a separate .css file and load it dynamically within my plugin code (How would this be accomp ...

jquerycssjquery-plugins