Two pictures, one adjusting in size and one staying the same size

I am working on a design with an 800px wide div that contains side-by-side images - one photo and one map. The challenge I am facing is that the map, which is 300px in width and has intricate details, becomes unusable when resized for smaller screens. I want to prevent the map from resizing at all on smaller screens, while allowing the photo to resize indefinitely without causing the map to wrap around and appear below it.

I am wondering if it is possible to achieve this using just one container, rather than having separate containers for the photo and map. Here is the current code:

.container {
  width: 800px;
  max-width: 100%;
}
.photo {
  float: left;
  max-width: 100%;
  height: auto;
}
.map {
  float: right;
  width: 300px;
  height: 250px;
}

<div class="container">
  <img class="photo" src="photo.jpg">
  <img class="map" src="map.png">
</div>
htmlcssresponsive-designimage-resizing

Answer №1

Check out this demonstration: http://codepen.io/theskumar/full/tHwjo

You can view the codepen here: http://codepen.io/theskumar/pen/tHwjo

Try resizing your browser to see the effect.

html

<div class="container">
  <div class="photo"><img src="http://placehold.it/400x400"> </div>
  <div class="map"><img src="http://placehold.it/300x400"></div>
</div>

css 

.container{
  position: relative;

  /* for demo */
  width: 90%;
  margin: 0 auto;
}

.photo {
  margin-right: 300px;

  /* for demo */
  height: 400px;
  border: 4px solid red;
}

.map {
  position: absolute;
  right: 0;
  top: 0;
  width: 300px;

  /* for demo */
  border: 3px solid blue;
  height: 400px;
}

img {
  width: 100%;
  height: 100%;
}

Cheers,

Answer №2

Your coding skills may need a bit of improvement.

.wrapper {
  width: 800px;
  max-width: 100%;
  white-space: nowrap;
  overflow: auto;
}
.image {
  float: left;
  width: calc(100% - 300px);
  max-width: 100%;
  height: auto;
}
.map {
  float: right;
  width: 300px;
  min-width: 300px;
  height: 250px;
}

<div class="wrapper">
  <img class="image" src="photo.jpg">
  <img class="map" src="map.png">
</div>

Please review the code and get back to me with any feedback.

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

Organize objects neatly in a grid formation

I have a .test div with grid-template-columns: auto auto auto;. The column width is set to vary based on the element width, and I also used justify-content: start; to align the columns to the left. I chose to use auto instead of 1fr to prevent the columns ...

css

The JavaScript function modifies the value stored in the local storage

I'm in the process of developing a website that requires updating the value of my local storage when certain JavaScript functions are executed. Currently, I have this code snippet: localStorage.setItem('colorvar', '#EBDBC2'); I&ap ...

javascripthtmlcssfrontendstorage

Changing a background image url using jQuery by clicking a button

I'm struggling to find a way to use jQuery to add a background image URL to my CSS. Everything I've attempted so far has been unsuccessful. let button = document.querySelector('form button.btn') button.addEventListener('click&ap ...

javascriptjqueryhtmlcss

There are times when window.onload doesn't do the trick, but using alert() can make

I recently posted a question related to this, so I apologize for reaching out again. I am struggling to grasp this concept as I am still in the process of learning JavaScript/HTML. Currently, I am loading an SVG into my HTML using SVGInject and implementi ...

javascripthtmlhttpsvgonload

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

jqueryhtmltablesorter

How to use Vue.js to automatically redirect to a URL when a button is clicked

I have created a button that, when clicked, should redirect to a URL passed in it. Below is the code snippet: <template> <button type="button" v-on:click="gotosite(modalDetails.final.product_url)">Buy</button> </template> <s ...

htmlvue.jsvuejs2

Is it possible to switch the orientation of the input fields from vertical to horizontal?

My custom form is displayed below: <form novalidate class="form-group" ng-hide="tab==1"> Reviews Min: <input type="number" ng-init="revNum=0" class="form-control" min="0" step="10" ng-model="revNum" /> Min Price: <input type="numbe ...

htmlcssformstwitter-bootstrap

The React Bootstrap modal refuses to fully close no matter how many times I click away or even on the close button

I am facing an issue with a modal in my React component. When I open the modal, it does not completely close when I try to click away or hit the close button. The backdrop disappears but the modal itself remains on the screen. (Screenshots attached for r ...

cssreactjsreact-bootstrap

Is it possible to use jQuery/JS to automatically format currency input as it is typed, adding a 1000 separator and ensuring

I'm working on a text input field that needs to format the value as it is being typed, with restrictions of 2 decimal places and 1000 separators. This field should only allow for digits to be entered. Specifically, this input is meant for users to ent ...

javascriptjqueryhtml

Deactivating a hyperlink on my print-friendly webpage with JavaScript

My code is designed to generate a printable version of a webpage by duplicating the HTML content and then making certain modifications, such as deactivating buttons upon page load. In addition to disabling buttons, I also aim to deactivate all links on th ...

javascripthtmlanchor

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

Trigger a function from a Bootstrap modal

Here is a preview of my HTML code : <form action="form2_action.php" method="post"> <table> <tr> <td>First Name </td> <td>:</td> <td><input type="text" id="f ...

javascriptjqueryhtmlcsstwitter-bootstrap

Leveraging the power of ExpressJs to incorporate a dynamic Navbar onto

ExpressJS and EJS are my chosen technologies for creating Views. When it comes to the navigation bar, I want to add a class="active" to the links that represent the current page. However, if I use partials in my views, how can I achieve this? Here is a q ...

cssnode.jstwitter-bootstrapexpressejs

What is the purpose of using JSON.parse(decodeURIComponent(staticString))?

A specific approach is utilized by some dynamic web frameworks in the following code snippet <script> appSettings = JSON.parse( decodeURIComponent( "%7B%22setting1%22%3A%22foo%22%2C%22setting2%22%3A123%7D")); </script> Is there a part ...

javascriptjsonhtml

Creating anchor links with #id that function correctly in an Angular project can sometimes be challenging

My backend markdown compiler generates the HTML content, and I need Angular to retrieve data from the server, dynamically render the content, and display it. An example of the mock markdown content is: <h1 id="test1">Test 1<a href="#test1" title ...

javascripthtmlangulartypescriptanchor

Retrieving PHP information in an ionic 3 user interface

We are experiencing a problem with displaying data in Ionic 3, as the data is being sourced from PHP REST. Here is my Angular code for retrieving the data: this.auth.displayinformation(this.customer_info.cid).subscribe(takecusinfo => { if(takecusi ...

phphtmlangulartypescriptionic3

Storing multiple values of dynamically added elements in a single variable and accessing them within a function

Is it possible to store multiple values into a single variable and then access them in a setTimeout function? $(document).ready(function (){ div ({'div':'#noo','auto':'true','pos':'top',' ...

javascriptjqueryhtmlwebsettimeout

Styling an unordered list with CSS in HTML is a powerful

I am working with an unordered list where each list element contains two spans: span A and span B. My goal is to style these elements so that they are displayed horizontally on the screen, with span A above span B in each set. Example: spanAItem1 sp ...

htmlcss

Display a list next to a block of text and image using HTML and CSS styling

I am having trouble with keeping a navigation list aligned inline with a block of text that includes an image. My issue arises when I expand the browser to full screen size, causing the list to overlap the text block. Here is the HTML code snippet: <bo ...

htmlcss

What is the best way to update the content of a text area using PyScript?

Currently, I am in the process of developing a program that involves entering text, clicking a button, processing it, and then displaying the output on a textarea. However, I'm faced with an issue where the textarea fails to update as expected. I woul ...

htmltextareapyscript