IMG & DIV Resizing with JQuery leads images to resize without changing position relative to neighboring DIVs (They stay fixed and create overflow)

Question

It's almost doing what I want it to!

Here's a JSFiddle of what I would like to accomplish . (Thanks to another user here, I found this while trying to find a solution for my problem. Move the middle vertical divider to the right to watch the image resize relative to the text).

Here's a JSFiddle mockup of my problem . (Move the middle divider to the left first to confirm that the images are side-by-side, then to the right to watch then resize accordingly. However, the images stay fixed to their position while resizing instead of dynamically staying side-by-side, and it create an overflow with a horizontal scrollbar).

You can view this live on my website for the full version, if needed at zsophianorris.info (click on the "photo" tab. Doesn't work on mobile).

CODE SNIPPET

  var maxWidth = $('.outer').width(); var maxHeight = $('.outer').height(); var windowWidth = $(window).width(); var windowHeight = $(window).height(); $(window).resize(function(evt) { var $window = $(window); var width = $window.width(); var height = $window.height(); var scale; // early exit if(width >= windowWidth && height >= windowHeight) { $('.outer').css({'-webkit-transform': ''}); $('#fotowrapper').css({ width: '', height: '' }); return; } //scale = Math.min(width/maxWidth, height/maxHeight); scale = Math.min(width/windowWidth, height/windowHeight); $('.outer').css({'-webkit-transform': 'scale(' + scale + ')'}); $(' 

 .fade { } .outer { float: left; } .fotoholder-top { position: relative; width: 480px; height: 320px; overflow: hidden; } .fotoholder { position: relative; width: 480px; height: 320px; overflow: hidden; } .overlay { opacity: 0; position: absolute; left: 0; bottom: 0; width: 100%; font: 400 50px/1.3 'Oleo Script', Helvetica, sans-serif; color: #FFFFFF; text-shadow: 4px 4px 0px rgba(17,17,17,0.3); text-align: center; vertical-align: middle; line-height: 320px; } .fotoholder-top img, .fotoholder img, .overlay { transition: .3s all; } .fotoholder-top img { max-width: 100%; } .fotoholder img { max-width: 100%; } .fotoholder-top:hover .overlay { opacity: 1; } .fotoholder:hover .overlay { opacity: 1; } .fotoholder-top:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-filter: blur(2px); filter: blur(2px); } .fotoholder:hover img { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.1); -webkit-filter: blur(2px); filter: blur(2px); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="fotowrpper"> <div class="outer fade"> <a href="http://zaralyyth.deviantart.com/art/Long-Night-of-Solace-564652691" target="_tab"> <div class="fotoholder-top"> <img class="foto" src="http://i.imgur.com/hA7jtkO.jpg"> <div class="overlay"> <h2>Solace</h2> </div> </div></a> </div> <div class="outer fade"> <a href="http://zaralyyth.deviantart.com/art/Recollection-682091553" target="_tab"> <div class="fotoholder-top"> <img class="foto" src="http://i.imgur.com/3W1QVDz.jpg"> <div class="overlay"> <h2>Recollection</h2> </div> </div></a> </div> </div> 

Answer 1

fotoholder规则集的固定宽度为480px除非在缩放图像时更改，否则您的holder不会像图片一样缩小。