Question

我正在使用HTML，CSS和jQuery构建的简单图库。当用户点击图像时，图像的较大版本应该在框架中弹出，并在其后面加上叠加。我对水平方向的图像没有任何问题，但是对于垂直方向的图像，较大的图像会出现扭曲。

您可以在CodePen上查看我的工作示例：http://codepen.io/anfperez/pen/AXZgRV

我尝试通过在变量中保存图像的高度并使用jQuery更改属性来更改图像的属性，但它似乎无法正常工作。

如何访问较大图片网址的高度和宽度并放入框架？我正在尝试以下代码，但这些代码无效。

var height_large = $(this).attr('height')

var width_large = $(this).attr('width')

$('#frame img').attr('height', height_large)
$('#frame img').attr('width', width_large)

供参考，以下是我尝试下拉的照片的实际网址： https://farm8.staticflickr.com/7072/7274940170_c166072ddf_c.jpg

Answer 1

将#frame img的高度更改为auto对我有用。它以固定的宽度显示较大的图像，并相应地容纳高度。所以它使它成比例正确。您只是想确保您的图片至少与固定宽度一样宽，以避免升级。

#frame img {
  display: none; 
  position: fixed;
  background-color: white;
  width: 700px;
  height: auto;
  margin-left: -350px;
  left: 50%;
}

Answer 2

您可以在框架中设置naturalWidth后阅读图片的naturalHeight和src属性，并在CSS的width和height中设置这些值。您应该为帧图像设置一个load事件侦听器，以便在交换新src时图像完成加载后立即设置，并通过调整图像重新定位图像。 marginLeft到新图片宽度的一半。您还可以将帧/叠加层的淡入淡出效果移动到此处，以便在点击时淡化为正确的大小，而不是在淡入时调整自身：

$('#frame img').on('load', function(e) {
  e.target.style.width = e.target.naturalWidth + 'px';
  e.target.style.height = e.target.naturalHeight + 'px';
  e.target.style.marginLeft = -(e.target.naturalWidth / 2) + 'px'; //re-center the image
  $(this).fadeIn(); 
  $('#overlay').fadeIn();
});

jQuery / CSS：单击时更改图像的高度和宽度属性

2 个答案: