使用 JQuery 调整 IMG 和 DIV 大小会导致图像调整大小而不改变相对于相邻 DIV 的位置（它们保持固定并产生溢出）

Question

它几乎是在做我想做的事！

Here's a JSFiddle of what I would like to accomplish。 （感谢这里的另一位用户，我在尝试为我的问题找到解决方案时发现了这一点。将中间的垂直分隔线向右移动以观察图像相对于文本的大小调整）。

Here's a JSFiddle mockup of my problem。 （首先将中间分隔线向左移动以确认图像是并排的，然后向右移动以观看然后相应地调整大小。但是，图像在调整大小时保持固定在其位置，而不是动态保持并排-边，它会创建一个带有水平滚动条的溢出）。

如果需要，您可以在我的网站上实时查看完整版 zsophianorris.info（点击“照片”标签。不适用于移动设备）。

代码片段

	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 宽度，除非缩放图像时宽度发生变化，否则您的持有人不会像图片那样缩小。