Adaptable positioned picture

I'm trying to figure out how to make a series of positioned images adjust to the window's dimensions. Should the images be relative and the page wrap absolute, or vice versa? I've been experimenting on jsfiddle but can't seem to get it right. The website linked below achieves the effect I want, where the images respond completely to the window's width:

Here's my jsfiddle setup: http://jsfiddle.net/kenhimself/uz41Leno/

Thank you in advance!

CSS:

.a { top:0; left:20%; height:300px; }
.b { top:150px; right:0; height:250px; }
.c { top:400px; left:0; height:200px; }
.d { top:600px; left:50%; height:100px; }
.e { top:900px; right:20%; height:300px; }
.f { top:800px; left:10%; height:200px; }
.g { top:1300px; left:0; height:300px; }
.a, .b, .c, .d, .e, .f, .g { width:auto; }

div.page {  }
img { width:100%; height:100%; position:absolute; }
figure.thumbnail { width:100%; height:100%; position:relative; }
html, body { margin:0; padding:0; width:100%; height:100%; }

HTML:

<div class="page">
    <figure class="thumbnail">
        <img class="a" src="http://i62.tinypic.com/fxqe6g.jpg"/>
        <img class="b" src="http://i62.tinypic.com/2wgeutv.jpg"/>
        <img class="c" src="http://i61.tinypic.com/dptspl.jpg"/>
        <img class="d" src="http://i60.tinypic.com/2dv8mj6.jpg"/>
        <img class="e" src="http://i60.tinypic.com/208u109.jpg"/>
        <img class="f" src="http://i57.tinypic.com/2qdpvly.jpg"/>
        <img class="g" src="http://i58.tinypic.com/2u4ljmd.jpg"/>
    </figure>
</div>

Answer №1

Your fiddle has been updated by me. The key is to avoid static size declarations and focus on using more relative/dynamic sizing like max-width instead of width.

If you want to achieve effects similar to those on your example site where images fly around after resizing, you may need to consider a javascript-based solution.

UPDATE

In the example given, the author wraps the images in a div and sets the width and position relative to the container. As the container shrinks, the wrapper also shrinks. By setting the image at 100%, it will adjust its size accordingly.

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

The scroll bar of the Bootstrap modal keeps playing peekaboo every time a new modal is triggered

After trying numerous solutions without success, I am posting this question regarding an issue with the scrolling behavior of Bootstrap modals. Here is the scenario: I have 2 Modals: Modal-1 and Modal-2. When a user is inputting information in Modal-1 ...

Problem with CSS animations in IE10

I've encountered a problem with a specific section of a website I created. This section functions perfectly on all browsers and older versions of Internet Explorer, but not on the latest versions. It seems that IE no longer supports [IF] statements in ...

Styling Collapse Text in Bootstrap Framework

I have a question about the "Accordion example" in the Bootstrap Collapse Component. My query is regarding removing the underline from the text "Collapsible Group Item" 1-3 when they are activated. Normally, this text is not underlined, but upon hovering, ...

submit a new entry to add a record to the database

Hey there, I recently started learning PHP and JS and I'm trying to insert a row into a WordPress database table. I need to get the information needed for insertion from another table, but I'm facing an issue with the PHP file as it's not in ...

Opening an HTML file in Eclipse is a simple process that can be

Q1) Is there a way to open this file in a browser for testing? Q2) Can I quickly open this in Chrome from Eclipse and test it? click here for image ...

Expandable Bootstrap collapse and accordion open horizontally, not vertically

I want to use Bootstrap collapse but I want to keep my div-s with the content beneath each link, mainly because that's how i need it to work on mobile (the menu is a column and that the content opens under each link). Unfortunately, on website I have ...

Tips for changing the color and incorporating text into an image

Hey there! I'm interested in creating a website where users can select colors like blue, white, and black without the page reloading. Once a color is selected, users should have the option to add text on top of the color image, as well as the option t ...

Conceal the href element within a designated UL using JavaScript

Is there a way to only hide the href element in a specific UL element, rather than hiding all href elements with the same class name? Let's consider an example HTML code: <ul class="UL_tag"> <li>Text 1</li> <li>Text 2< ...

How can I create a tickable image grid in Nativescript Angular?

My goal is to create an image grid in a Nativescript Angular App where users can select images and then move to the next page with the selected image IDs or names. I have successfully created the image grid, but I am struggling to make the images tickable ...

Providing an HTML application even in the absence of an internet connection

I am currently developing an application that needs to function offline. I have experimented with the HTML5 manifest feature, which is now considered deprecated, and have also explored using 'Service Workers'. However, my challenge is that the ap ...

Submitting values in URI through an HTML form

Hey there, I'm really in need of some assistance with this issue that's been driving me crazy... :) So, I'm working on a project using Symfony2 and AngularJS: <form class="navbar-form navbar-right" role="form" action="" method="post"> ...

Utilizing React JS: Displaying or Concealing Specific Components Based on the URL Path

Is there a way to dynamically change the navbar items based on the URL without having separate navbar components for each side? My current navbar design features 3 links on the left side and 3 links on the right, but I want to display only one side at a ti ...

Receiving 'Unexpected end of input' error when using a string as a JavaScript function argument

I am trying to implement an ajax request function in my project. This is the code snippet I have: function Reject(id, scomment) { jQuery.ajax({ type: "POST", url: "reject.php", data: {id: id, Scomment: scom ...

Can html-webpack-plugin be configured to create <style> elements from CSS files?

I am managing a static site with Vue and Webpack. In my project, I have a file named style.css containing global CSS rules which I import using import './styles.css' in my index.js file. Additionally, I have some .vue files that generate their o ...

What methods can I use to pass an argument from an HTML file to jQuery?

I need to retrieve the value 7 from the HTML file <button id="buttonseven" onclick="buttonClick(7)">7</button> How can I capture this value using jQuery? $(document).ready(function(){ $('#buttonseven').click( ...

Tips for organizing wells within bootstrap into separate columns

Looking for a way to organize my well list into two separate columns. I've included a link to my Plunker project here: https://plnkr.co/edit/35oC9Eochk6EPgKeI9he?p=preview. Below is the view section: <div class="well well-lg" ng-repeat="(key, d ...

PHP MySQL query is causing multiple rows to be updated in the database

My goal is to update the quantity and price in two tables: Invoice and Order_Table. The updates should only apply to a specific OrderID. Here's my attempt: $UpdateQuant = "UPDATE Order_Table SET Quantity = '$NewQuant' WHERE OrderID = ' ...

Inline CSS for altering the appearance of text within a DIV container

Within the confines of this DIV element... <div name="layer1" style="background-color:lightblue;"> <hr>Site:Downtown DataCenter Device: 2KBS</hr> </div> Hello there, I am utilizing Inline CSS Styling. Is it possible to make the t ...

Tips for transferring information in JavaScript games

While browsing an HTML-based website, I am able to send POST and GET requests. However, in a JavaScript game like agar.io, how can similar actions be performed? Specifically, when playing a popular game like agar.io, how is my game state (such as positio ...

"Provide information, then open a new webpage by clicking on a button. Perform various actions with the form by using type

Is there a way to quickly submit form entries to my database and then automatically redirect to a new page? My current situation requires that submitted information is stored in the DB before directing users to a thank you page, all in one seamless click! ...