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

Tips for Implementing Multi-Level/Nested in Ajax Requests

I am currently developing a user-friendly web application with intuitive multi-level options that loads new content without the need to refresh the entire page. This is how my structure looks: /index.php /schools.html /colleges.html Within schools.html, ...

jquerycssajax

Initially, my PDF file does not get selected, except in the Internet Explorer browser

I am currently facing an issue with selecting PDF files in Internet Explorer. The process works smoothly in Google Chrome, but I encounter a problem when trying to select PDFs in IE. Specifically, when I attempt to select a PDF for the first time in Inter ...

javascriptjqueryhtmlinternet-explorer

Adjust the placement of the navigation to the middle of the

Currently working on a webpage using html/css, I came across a stylish navigation bar which I decided to customize. However, I'm facing difficulty in aligning the navigation bar at the center of the header. Here is a snapshot of the current layout: h ...

htmlcss

Serialize a series of select boxes to optimize for AJAX POST requests

To better explain my issue, let's consider a simple example: Imagine I have a form that collects information about a user: <form action="#" method="post" id="myform"> <input type="text" name="fname" /> <input type="text" name= ...

javascriptjqueryhtml

Tips on aligning an entire text in R Markdown using the bookdown::gitbook function as the desired output

I've been looking for a way to justify the text in my gitbook, but haven't had any luck finding a solution. I've attempted: Adding "text-align: justified" to the CSS right after the YAML Header: <style> body { text-align: justify ...

htmlcssr-markdownbookdowngitbook

CSS transformation incomplete

I am currently creating a scrolling ticker animation for my website. Here is the HTML code: <div class="top-news"> <div class="t-n-c"> <div class="textwidget">Latest News: Our first 20 customers get 20% off their fi ...

htmlcss

CodeIgniter: Bootstrap disables become enabled once validation is completed

My modifuser views have a disabled input field set to hold the id value. <?php echo form_open('user/updateuser'); ?> <legend>Update User</legend> <div class="form-group"> <label for="id">ID</label> ...

htmltwitter-bootstrapcodeigniter

Ways to incorporate a dictionary into your website's content

I am in the process of developing a website for educational purposes while also honing my web programming skills. On this website, I have encountered some complicated terms that may be difficult for users to understand, so I want to implement a tooltip/mod ...

javascripthtmlcssnode.jsjson

Is it possible to send a message from a child iframe to its parent using HTML5 cross-browser compatibility

I've been following this tutorial on a video-sharing website, which demonstrates how to securely pass messages between an iframe and its parent. The tutorial can be found at a specific URL. To achieve this functionality, you would end up with a simila ...

javascripthtml

What is the best way to determine if a date is empty using Vuetify?

Could someone help me with checking if a date was entered by the user? I want to display an error message if a date is not provided. I attempted to use a rule for this purpose, but unfortunately it's not showing any error message. Below is the code I ...

htmlvue.jsvuetify.js

Guide on forwarding from one HTML page to another in the local disk

Currently, I am working on an employee appraisal application where users can submit appraisals that are stored in the backend. The initial page is a login screen. Once the user successfully logs in, they should be redirected to another page displaying in ...

htmlapache

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

Immersive jQuery slideshow embellished with an interactive counter, captivating thumbnails, dynamic progress bar,

Hey there! I'm currently working on my very first website and I could really use some assistance in creating a slider with images. I've tried searching for a solution to my problem online, but even after attempting to fix the suggested plugin, I ...

javascriptjquerycssslideshow

Issue with ng-model causing incorrect variable binding

My issue lies with a variable that I have connected to a select input through the use of ng-model. Strangely, the variable seems to not update with the correct data and retains the value assigned to it during initialization. I have a similar setup elsewhe ...

javascripthtmlangularjs

Creating a design with CSS that features three main content columns of equal height, all of which are scrollable and have fluid heights, along with a sticky

After extensive research through various online resources, I have yet to find a solution to my specific CSS layout inquiry regarding "3 equal-height columns with a 'really' sticky footer". The desired layout includes the following components: ...

htmlcss

Form input using the div element (when clicked)

I am currently working on a page that connects to a database with user information. For each user, I am creating a separate div element so that there are 6 divs total (each representing a different user). My goal is to have the ability for a user to click ...

javascriptphpjqueryhtml

Verify the accuracy of the color value on a web page using Selenium in Java

As a beginner in using Selenium with Java, I encountered an issue related to a symbol in my connected class turning green. I needed to assert whether the symbol actually changed its color. Below is the code snippet that I used: Boolean connectionSymbolG ...

javacssseleniumcss-selectors

Attempted everything... Clicking away but a div refuses to show up post-click, resulting in an error message

When attempting to click a button, I encountered an error stating that the element is not clickable at point (1333, 75) as another element would receive the click. This issue arose while using Google Chrome version 65. <li class="slds-dropdown-trigge ...

javahtmlselenium

Experiencing problems with the calling convention in JavaScript

Here is a snapshot of the code provided: If the function testFields at Line:3 returns false, then the program correctly moves to Line:21 and returns the value as false. However, if testFields returns true, the program proceeds to Line:4, but instead of ex ...

javascriptjqueryhtml

Show a specific item when selecting an option from a dropdown menu

Hey there, I have a question regarding creating a theme for the Genesis Framework. Right now, I'm facing a challenge with one particular element. Here's the situation: I've got two drop-down lists, but I only want the second one to be visib ...

javascriptjqueryhtmlwordpressdrop-down-menu