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

Which specific divs should I assign an ID to within the class?

Is there a way to apply the gray box style to specific divs instead of all of them? Should I include an id somewhere in the code? <!DOCTYPE html> <html> <head> <style> div { width: 320px; padding: 10px; border: 5px soli ...

htmlcss

What is the best way to manage photos from your phone without having to upload them online?

I'm currently developing an application using AngularJS/Javascript, HTML, and CSS within a cloud-based environment on c9.io. My next task is to create and test an app that can access the phone's photo album, apply filters to images, and I'm ...

javascripthtmlcssangularjsimage-processing

How can I make tooltipster display tooltips properly?

I have been struggling to customize tooltips using a library called tooltipster. Here is what I currently have: Head of index.html: <head> <!--TOOLTIP CSS--> <link rel="stylesheet" type="type/css" href="node_modules/tooltipster-master ...

javascriptjquerycsstooltiptooltipster

Welcome to the launch of OpenWeatherMap!

I just signed up for an account on the OpenWeatherMap website. My goal is to retrieve the current weather information for a specific location using the City ID API Call: http://api.openweathermap.org/data/2.5/weather?id=2172797&appid=myAPIKey How ca ...

javascripthtmlopenweathermap

What are the steps for implementing the Ionic 2 Pulling Refresher feature in my application?

Hey everyone, I'm currently working on developing a mobile app using AngularJS 2/Ionic2. I am facing an issue with implementing a pull-to-refresh feature in my app. We followed the steps outlined in this link, and while we were able to get the page to ...

cssangularionic2

Struggling to align the push menu properly within the Bootstrap framework

I am currently utilizing Bootstrap as my UI framework and attempting to create a push menu on the left side of the page. While I have made progress towards achieving this goal, there are some bugs in the system that I am encountering. Specifically, I am ha ...

javascriptjqueryhtmlcsstwitter-bootstrap

the division does not span the entire width

I am faced with a dilemma involving two div elements structured as follows: <div id="left"><p>.....</p><br/> <p>.....</p> </div> <div id="right"><img ..../></div> Accompanied by CSS styling: #l ...

cssxhtmlhtml

What would you suggest as a more effective method for preventing content overlap during multi uploads?

Recently, I was working on a Wordpress site and used the Ninja Forms plugin to create a form. One of the challenges I encountered was styling the file upload button. After some research, I came across a tutorial that provided a great solution that worked a ...

jquerycssformsfile-upload

Controling attributes during the design process

Experimenting with a basic User Control in Visual Studio 2008: I've created a Panel called Wrapper with various controls inside. Will Visual Studio be able to handle this during the design phase? public partial class TestControl : System.Web.UI.UserC ...

cssvisual-studio-2008user-controlsdesign-time

Image floating to the left and right sides within a group, with the text vertically aligned in the middle of a div of unspecified height

Can text be vertically aligned in the middle of a div with an unknown height when there is a floated image present? Specifically, for the first and third div group of 'groupsection2', the image will float to the left; and for the second and fourt ...

htmlcss

Linking all styles with Angular 2

Is it possible to apply a style when the exact nature of that style is unknown? Consider a scenario where I have a model containing string variables defining styles, as shown below: myStyle1:string="margin-left:10px"; myStyle2:string="margin ...

cssangularbindingstyles

Explore three stylish ways to showcase dynamic JavaScript content using CSS

Objective: For Value 1, the CSS class should be badge-primary For Value 2, the CSS class should be badge-secondary For all other values, use the CSS class badge-danger This functionality is implemented in the handleChange function. Issue: Current ...

javascriptcssreactjs

Fancybox overlay not adjusting to full height

When working with JavaScript: $(document).ready(function() { $(".fancybox").fancybox({ helpers: { overlay: { opacity: 0.4, css: { 'background-color': '#FFF' ...

jqueryhtmlcssfancyboxfancybox-2

Issues with Implementing Scroll Directive in Angular JS

Apologies for asking what may seem like a silly question. I'm still new to using AngularJS and recently came across a neat little scroll directive on http://jsfiddle.net/88TzF/622/. However, when I tried implementing the code in the HTML snippet below ...

javascriptjqueryhtmlcssangularjs

The content in the div is not contained within a border in the css/html

I am struggling with a div wrapper that has a border, but the border is not wrapping around the content and I can't figure out why. Here is my issue on screen: This is what I want it to look like: Below is my HTML code: <div class="event_area_t ...

htmlcssborderwrapper

Navigation bar in HTML positioned on the right side of the webpage

My goal is to have a navigation bar on the right side of the page, taking up 250px, while allowing the main content to naturally adjust its size based on the window dimensions. I do want the main content to appear before the navigation in the HTML structur ...

htmlcss

Incorporating a classList.toggle into a snippet of code

button, p, h1, h2, h3, h4, h5, a{ /* Define specific elements to use "fantasy" font */ font-family: Tahoma; } #main_body{ margin: 0px auto; background-color: #dedede; } #top_body{ /* Remove margin for simplicity */ } #t ...

javascripthtmlcss

What is the best way to implement NgClass on a single iteration within NgFor while utilizing parent/child components?

My goal is to toggle the visibility of tiered buttons when a parent button is clicked. I am using ngFor to generate three buttons on tier 1, but I'm struggling to select only the desired tier when clicked instead of affecting all of them. I've m ...

htmlangularangular7ngfor

An oversized image creates additional room

I currently have a board that consists of 3 blocks, with each block containing a grid of 25 squares. These squares are 40x40px in size with a margin around them, resulting in an overall size of 220px x 220px. Each square also has some space above and below ...

htmlcss

Develop a chart featuring sub-categories and column headings

I'm in the process of creating a table with subcategories and headers that resembles the image provided below: Here's what I've come up with so far: <table> <thead> <tr> <th>Item</th> & ...

htmlcss