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

Adding text to a Video Js fullscreen window on an iPad

Looking to enhance user experience on iPad while using a video js player, I want to make an image pop up upon completion of the video. Currently, I have it set up to work without full screen mode, but iPad users prefer watching videos in full screen. Is th ...

jquerycsshtmlhtml5-video

A guide on retrieving real-time data from PHP using Ajax

Being new to Ajax, I am struggling to grasp how to retrieve changing variable values from php. Below is the code snippet that I have been working on: <?php $pfstatetext = get_mypfstate(); $cpuusage= cpu_usage(); ?> <div id="show"> <c ...

javascriptphphtmlajax

Create dynamic and interactive content by embedding text within SVG shapes using the powerful D

How can I write text into an SVG shape created with d3.js and limit it to stay inside the shape similar to this example http://bl.ocks.org/mbostock/4063582? I attempted to use a clipPath following the example provided. However, when inspecting with firebu ...

javascripthtmld3.jssvg

Is there a way to programmatically access the title of a TitledPane in JavaFX without using CSS?

Is there a way to set the title of a TitledPane to bold in Java code without using CSS? I created a TitledPane and I want the title's font weight to be bold. This is what I tried: TitledPane Rootpane = new TitledPane(); Rootpane.setText("Options"); ...

javacssjavafx

Utilize the identical button and modify the text displayed on it for implementing my jQuery function that toggles visibility

Is there a way to modify my current jQuery function for displaying and hiding a contact form using the same button? Currently, I have two buttons that toggle the visibility of the form: "Write me" shows the form on click and changes to "I don't want ...

jqueryhtml

Is there a way to activate the window load event within this Jest test scenario?

I'm in the process of setting up my first Jest test for DOM manipulation and jQuery in my Rails project. Right now, I'm facing a basic challenge of ensuring that imported JavaScript functions are functioning as expected. In order to tackle this ...

javascriptjqueryhtmlruby-on-railsjestjs

Instructions on making a Popup appear after a specified duration of mouse inactivity on a webpage

Hello, I am new to web development and could use some guidance on creating a popup window for users to enter their username and contact number. It should be able to store this information in a database and activate after the user has been idle for about 10 ...

jqueryhtml

Seeing <br> elements being inserted into a <div> element in the page source

I have encountered an issue where my code does not contain any br tags between the beginning of the div tag and table tag, but when I view the source, several br elements appear. Below is the code snippet from a .php file: <div id='tx_addAccountp ...

htmlcss

Animating the mobile menu transition using Bootstrap CSS

Can anyone help me with animating the mobile menu when I click the menu icon? This is what I have for the menu: .overlay-menu { position: fixed; display: none; z-index : 1040; width: 100vw; height: 100vh; background: rgba(0, 0,0, 0 ...

javascripthtmlcssbootstrap-4

Modify the text of a button using JavaScript without referencing a specific div class

THE ISSUE I'm facing a challenge in changing the text of a button on my website. The <div> I need to target doesn't have a specific class, making it difficult for me to make this edit. While I have some basic understanding of JavaScript, ...

javascripthtmlclassdombutton

Is there a way for me to generate a tab that shows content when hovered over?

Is it possible to create a tab that displays a vertical list of redirections when the mouse hovers over it, and hides when the mouse is moved away? This seems like a challenging task. Can someone guide me on how to achieve this, especially if it involves ...

c#javascripthtmlcss

Design the button element with input text using CSS styling

https://i.sstatic.net/3vdRV.png Is there a way to stylize input text and buttons similar to this using CSS or Vuetify JS? ...

cssbootstrap-4vuetify.js

a search-enabled dropdown menu within an Angular input field

I can't seem to get the input box to display in my code below. Can you help me figure out why? component.html <form [formGroup]="formGroup" (validSubmit)="onSubmit()"> <div class="form-group mb-3"> ...

htmlangulartypescriptinputdropdown

Troubleshooting alignment problems with a responsive gallery (Bootstrap-gallery & justifyGallery)

Looking to showcase a gallery of images using jquery-justifyGallery and bootstrap-gallery. Want to display 4 images in a row, but running into issues when trying to display 5 images where the last image in the row ends up with a larger width. Bootstrap has ...

javascripthtmlcsstwitter-bootstrap

Exploring the integration of HTML and CSS within the Django framework

Trying to implement a star rating in a specific HTML file The file I am working on is called book_detail.html {% extends "base.html" %} {% load static %} {% block title %} Block Detail Page {% endblock title %} {% block sidenav %} {% for item ...

htmlcssdjangodjango-staticfiles

Having trouble with the "Cannot POST /contact.php" error message?

Help needed with ERROR "Cannot POST /contact.php". Here is the code: Code from index.html <form action="/contact.php" method="post"> <div class="w3-row-padding" style="margin:0 -16px 8px -16px"> <div class="w3-half"> ...

phphtml

The use of .hidden in Tailwind-CSS does not result in the application of flex or block styles to the element

My intention is to hide the div on small screens and display it on larger screens starting from md: However, it seems like the .hidden class has a higher priority or may be interfering with some of my dependencies. <div className="hidden md:flex&qu ...

cssreactjsnpmtailwind-csspostcss

Tips for capitalizing the first letter of a directory

I want to automatically convert all directories in the URI to lowercase if the user types them in uppercase. For example, https://example.com/hOmE should be converted to https://example.com/home. ...

html.htaccess

Ways to increase the size of a div to match the maximum height of its parent container

My current project involves using an angular dialog layout where the API to open and manage the dialog comes from a separate library. The dialog's parent container has a max-height attribute, meaning the dialog's height is determined by its conte ...

htmlcssangular

Python Web Scraping Automation Tool - Inconsistent Encountering of 511 Error Code

My latest project involves opening Firefox with Selenium, extracting HAR files using BrowserMobProxy, and accessing JSON data from those files at timed intervals. Occasionally, however, I encounter a 511 Error: <!DOCTYPE html><html><head> ...

pythonhtmlseleniumwebnetworking