Expand the width of the image gradually until it reaches its initial size within a flexible DIV container

I am working with a <div> container that occupies 80% of the screen on a responsive page. Within this <div>, I am attempting to display an image that is sized at 400 x 400 pixels.

My objective:

  1. As the screen width increases: The <div>'s width will expand, with the image's width increasing to a maximum of 400px.

  2. When the screen width decreases: The <div>'s width will shrink. The image's width will begin to decrease once the screen's width falls below 400px.

You can view my code on JS Bin.

Any suggestions or ideas?

javascripthtmlcssimage

Answer №1

To ensure the image takes up 100% of its parent's width, simply add width: 100% to the image. This will prevent it from exceeding 400px in width thanks to the max-width property:

.container {
  width: 90%;
  height: 400px;
  border: 1px solid blue;
}

.container img {
  width: 100%;
  max-width: 400px;
<div class="container">
  <img src="https://s14.postimg.org/4nu4hmvyp/8222.jpg">
  </div>

Answer №2

To make your image responsive, you can simply assign a width and height of 100% to the image tag:

.container {
  width: 80%;
  height: 300px;
  border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Responsive Image</title>
</head>
<body>
<div class="container">
  <img src= "https://example.com/image.jpg" style="width: 100%; height: 100%; max-width: 300px;">
  </div>
</body>
</html>

Answer №3

Give this a try for compatibility with IE6:

.container {
    width: 90%;
    height: 400px;
    border: 1px solid blue;
}

.container img {
    width: 100%;
    max-width: 400px;
    width: expression(this.offsetWidth > 400 ? "400px" : "auto");
}

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

Adjusted position of the viewport if the DOM element containing the renderer is not located at the top of the display

I've come across an issue with a three.js scene within an Angular custom directive in the view. At the top, there's a navigation bar for switching between views (pretty standard so far). I set up a simple scene with a cube and basic camera rotati ...

javascriptangularjsthree.jscoordinatesraycasting

Attempting to implement ajax for form submission, however finding that the $_POST array is coming back as empty

I'm attempting to send JavaScript arrays to a new page using Ajax. Although there are numerous questions on this topic on Stack Overflow, I have decided to implement Ajax in the following manner after examining various answers: var test = {}; test[& ...

phpjavascriptjqueryajax

Problem with ng-include in ng-view templates

Directory Layout: --app --partials --navbar.html --submit --submission.html index.html Using ng-include in submission.html: <ng-include src="'app/partials/navbar.html'" ></ng-include> However, the navbar does not displa ...

javascriptangularjsangularjs-ng-include

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...

javascriptphpjqueryhtml

Ensuring Data Integrity with JavaScript Form Validation

Ensure that if text box A is filled in, text box B must also be filled in before submitting. Vice versa, if text box B is filled in, make sure text box A has data as well. Is it possible to loop this check for multiple text boxes? For example, if row A o ...

javascriptsubmitvalidation

The feature of Switch css does not appear to function properly when used in conjunction with input type

Why does the switch button not work with the input type radio but works with a checkbox button? How can I maintain the radio input and solve this issue? @charset "utf-8"; /* CSS Document */ /* ---------- GENERAL ---------- */ body { background: #4a4a4 ...

htmlcssinputchecked

What is the best way to center a div vertically inside another div?

Aligning a div element horizontally within another div element is possible by using the margin: 0 auto; property as long as both elements have a specified width other than auto. However, this method does not work for vertical alignment. Is there a way to ...

htmlcssvertical-alignment

hiding elements yet passing down

Despite disabling the style sheet, a dynamically created form is displaying strangely. This form will show or hide various details based on selected options. For instance, many of the elements are generated with C#.net... formOutput += "<div class=&bs ...

javascripthtmlcss.netdom

Issues persist with $.getJSON

I apologize if this question has been addressed previously, but I couldn't find the answer I was seeking. My issue involves using $.getJSON to send variables to a PHP file. Although the file returns success as true, it always triggers the .fail functi ...

javascriptphpjqueryjsongetjson

What is the top choice instead of using the jQuery toggle() method?

After jQuery deprecated the toggle() method, I began searching for alternative ways to toggle classes on Stack Overflow. I came across various other methods to accomplish the same task (Alternative to jQuery's .toggle() method that supports eventData? ...

javascriptjquery

"Enhancing User Experience with Multiple Conditional Checkboxes in jQuery

Having difficulty making a checkbox change some HTML content using JQuery. There is a standard html checkbox with the following attributes <input type="checkbox" name="AQN1" class="checkbox Q1" value="AQN10" id="3mcq"> <input type="checkbox" nam ...

javascriptjqueryhtml

The button is not centered within the grid container

I need assistance centering the button within a Grid layout using Material-UI <Grid container style={{backgroundColor:'green'}} alignItems="center" justify="center" > <Grid alignItems="center" justify=&q ...

htmlcssmaterial-ui

What could be causing the read-only error in my presentation?

My website has always had a small slider that worked perfectly, but now an error message keeps popping up: Error: "myIndex" is read-only This is the JavaScript code in question: const myIndex = 0; carousel(); function carousel() { let i; const x = ...

javascripthtmlecmascript-6syntax-errorreadonly

Ways to eliminate basic text from HTML/HAML

Seeking a solution to align an image with CSS that is being hindered by unwanted text appearing next to it in Inspect Element. Despite pinpointing the source of the issue, attempts to remove the text have been unsuccessful and it continues to be a nuisance ...

htmlcsshaml

Animating jQuery Counter with Changing Background Color

I've implemented a Counter that counts from 0 to a specified number, and it seems to be working perfectly. However, I want to add an animation where the background color of a div height animates upwards corresponding to the percentage of the counter. ...

javascriptjqueryhtmlcss

Vuejs method to showcase input fields based on form names

I am working on a Vue.js form component with multiple input fields, but now I need to split it into two separate forms that will collect different user input. Form 1 includes: Name Surname Email with a form name attribute value of form_1 Form 2 i ...

javascriptformsvue.js

Modify the Markdown blockquote HTML format in Jekyll

Currently, I am diving into the world of Jekyll and I am working with a basic file that includes YAML frontmatter like this: --- layout: 'post' --- > Test Quote One accomplishment I'm proud of is successfully linking my CSS stylesheet t ...

htmlcssmarkdownjekyll

Ways to share code across AngularJS frontend and Node.js backend

How can code be effectively shared between an AngularJS client and a Node.js server? After creating an AngularJS application, I now need to develop a RESTful server to provide data to the client. Some Angular services used on the client-side could also be ...

javascriptnode.jsangularjsexpresscode-reuse

Encountering a React clash while integrating Material UI

Upon trying to utilize the AppBar feature in Material UI version 0.16.6, I encountered the following error: Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created within a c ...

javascriptreactjsnpmmaterial-ui

What is the best way to navigate through multi-dimensional arrays of objects in JavaScript?

I am trying to access JavaScript objects that are stored in a multi-dimensional array, which is being exported by a WordPress plug-in. Unfortunately, I cannot make changes to the code to use a single array. There are two arrays called "employees". Is this ...

javascriptjson