The image does not automatically adjust size when the window is resized

I'm having an issue with my HTML and CSS code that is supposed to display two images side by side and resize when the browser window shrinks, but it's not working as expected.

Even after removing all classes on the parent divs, the images still do not shrink...

Any thoughts on why this might be happening?

Thank you

.align {
    position: absolute;
    top: 75px;
    z-index: -100;
}
.navigate {
    margin: -10px 888px;
    width: 200px;
    z-index: 100;
}
.leftSide {
    height: 558px;
    margin: 20px 0px 0px 344px;
    max-width: 500px;
}
.rightSide {
    height: 558px;
    margin: -5px 0px 0px 1053px;
    max-width: 500px;
}
.verticalLine {
    width: 1px;
    background-color: red;
    height: 558px;
    margin: -557px 940px;
}
img {
    width: 70%;
    height: auto;
}
<div class="align">
    <div class="navigate"><a id="prevPic" href="#">&lt;&lt; Prev</a>
<a id="nextPic" href="#">Next&gt;&gt;</a>

    </div>
    <div class="leftSide">
        <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
    </div>
    <div class="verticalLine"></div>
    <div class="rightSide">
        <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg">
    </div>
</div>

htmlcss

Answer №1

.center {
text-align: center;
}
.container{
width:90%;
height:568px;
display:inline-block;
}
.navigate {
width: 100%;
text-align:center;
padding:20px;
}
.leftSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.rightSide {
margin:0;
height: auto;
max-height:100%;
width:49%;
text-align:center;
display:inline-block;
}
.separator {
width: 1px;
background-color: red;
height: 558px;
display:inline-block;

}
.leftSide img {
width:auto;
max-width:100%;

}
.rightSide img {
width:auto;
max-width:100%;

}
<div class="center">
<div class="container">
  <div class="navigate"> <a id="prevPic" href="#">&lt;&lt; Prev</a> <a id="nextPic" href="#">Next&gt;&gt;</a> </div>
  <div class="leftSide"> <img id="leftPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
  <div class="separator"></div>
  <div class="rightSide"> <img id="rightPhoto" src="http://images3.wikia.nocookie.net/__cb20121205063258/disney/images/7/71/Donald-duck-disney-photo-450x400-dcp-cpna013154.jpg"> </div>
</div>
</div>

Answer №2

Include the following properties in the div class:

 .div_class
  {
  justify-content: center;
  align-items: center;
  }

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

Listening for JS events on a CSS class called "int-only" which only accepts

Having an issue: I'm encountering a problem with this PHP code: <?php for($i = 0; $i < sizeof($floating_ips_json["floating_ips"]); $i++){ ?> <tr class="details-control-<?php echo $i; ?> cursor-pointer"> <t ...

javascriptphpcss

Understanding the Intrinsic Dimensions of Replaced Elements in CSS

I'm currently facing some challenges with the CSS Intrinsic & Extrinsic Sizing Module Level 3, specifically chapter 4.1 on Intrinsic Sizes. This section is proving to be quite difficult for me: When a block-level or inline-level replaced element h ...

htmlcss

Mastering the integration of Sass with NextJS

After successfully styling my NextJS app with SCSS modules, I encountered an unexpected error when I returned to work on it later: Syntax error: Invalid CSS after "...ound: variables": expected expression (e.g. 1px, bold), was ".$main-gradie ...

cssreactjsnpmsassnext.js

Ensure the navbar includes the .container class and insert an extra dropdown right next to the container without causing any misalignment

Desired output: Achieve two rows with a .container div, centered in the viewport and aligned with each other. The second row should contain the navbar within a .container. Additionally, add a non-collapsing dropdown at the end of the navbar row, outside th ...

cssbootstrap-5navbar

How to update the border color of focused elements in ExtJS?

In my ExtJS application running on ExtJS 6 with the default Theme-Triton, I am looking to customize the focus border color. Is there a solution to modify the CSS property that will globally change the focus border color from blue to red, for instance? ...

cssextjs

Modify the parent div's style if there are more than two children present (CSS exclusive)

Is there a way to use the same class, like .outer, for both divs but with different styling for the parent element when there are more than two children? Kindly refer to the example provided below: .outer1{ border: solid 6px #f00; } .outer2{ b ...

htmlcss

Validating HTML Forms Using PHP

I am experimenting with a basic HTML login form, but I can't seem to get it to function properly. This is all new to me as I am just starting out with PHP programming. Any assistance would be greatly appreciated! <?php $correctPassword = 'ho ...

phphtmlformsauthentication

Issue with conditional comment in IE 8 not functioning as expected

Struggling with changing the SRC attribute of my iFrame specifically for users on IE 8 or older. This is the code I have written: <script> var i_am_old_ie = false; <!--[if lte IE 8]> i_am_old_ie = true; <![endif]--> </script> ...

javascriptjqueryhtml

Fixing the issue of list styles not displaying properly when using CSS3 columns in Webkit can be achieved by

example here: http://jsfiddle.net/R7GUZ/3/ I'm struggling to make the list-style property work in webkit for a parent OL that is styled with -webkit-column-count: 2; -moz-column-count: 2; column-count: 2; Is there a way to format an ordered list ...

htmlcsshtml-listsmultiple-columns

How can I turn off Angular Grid's virtualization feature, where Angular generates div elements for the grid based on height and width positions?

Currently, I am working with an Angular grid (ag-grid) that dynamically creates div elements in the DOM to display data as the user scrolls or views different sections. As part of my testing process using Selenium WebDriver, I need to retrieve this data fr ...

javascriptcssangularjsseleniumag-grid

Is it possible to modify the CSS of a single class when hovering over a child class of a different and unrelated class?

I am struggling with CSS combinators, especially when dealing with nested div, ul, and li elements. My issue involves changing the CSS of a div with the class "H" when hovering over li elements with the class "G". Since all of this is contained within a s ...

javascriptjqueryhtmlcss

Using JavaScript to create a search bar: Can "no results found" only show after the user has completed typing their search query?

How can I ensure that the "no match" message only appears after the user has finished typing in their search query, rather than seeing it while they are still typing "De" and the list displays "Demi"? usernameInput.addEventListener("keyup",function(){ ...

javascripthtmlcssdom-eventsdisplay

Div expanding beyond intended size when media reaches maximum 468 pixels

When zoomimg is set to width: 145px; height: 145px; it ends up pushing the text that should be inside its parent element out of the parent. If you want to see the Zoomimg ProjectKort divs, check out the code below: .projectkort{ margin: 10px 0px 10px 0 ...

htmlcss

Extract the directory name from a URL using PHP, excluding any file names or extensions

Can anyone guide me on extracting the folder name only from a URL in PHP? For example, if my URL is I'm interested in retrieving just the part of the URL. Any suggestions on how to achieve this would be much appreciated. Thanks! ...

phphtmlurl

Tips on creating a responsive div element within the viewport?

I have a variety of nested div elements within a parent div, set up like this: #mycontent > div { width: 14.28%; } <div id="myheader">some header content</div> <div class="container" id="mycontent"> <div class="outerdiv" id= ...

htmlcss

Tips on leveraging state values within the makeStyles function in Material UI React

I'm in the process of building a Webpage and incorporating Material UI for the Components. Here's the code: import { makeStyles, Typography } from "@material-ui/core"; const useStyles = makeStyles((theme) => ({ container: { ...

javascripthtmlreactjsreact-nativematerial-ui

One crucial factor to consider when dealing with dual screen setups is the

Imagine you have the following code snippet : <ul> <li>Menu1 <ul class="submenu"> <li class="firstmenu">submenu-1</li> <li>submenu-2</li> < ...

jqueryhtmlcss

Having trouble interacting with an xpath-selected element in Selenium using Python?

I've been attempting to click on an element that I've selected using Xpath, but it appears that I am unable to locate the element. Specifically, I'm trying to click on the "Terms of Use" button on the page. The code snippet I've written ...

pythonhtmlselenium-webdriverxpathselenium-chromedriver

Forward the value of the selected radio button

Currently, I am focusing on this code snippet. <html> <script> var submit = document.getElementById('btnFormSubmit'); submit.addEventListener('click', submitForm); function submitForm(event){ event.preventDefault(); event. ...

javascripthtml

Steps to Display a JavaScript Function Two Times on a Single Page

Hey there! I'm currently working on a project where I need to display the output of my function in two separate divs. However, when I try to simply output the same ID, it messes up the whole code and the output becomes null. Here's the code snipp ...

javascripthtml