使用 jquery 调整特定图像大小答案

【问题标题】：specific image resize with jquery使用 jquery 调整特定图像大小
【发布时间】：2014-08-17 22:32:58
【问题描述】：

我一直在尝试复制在此网站上看到的效果：

http://www.gregparmasmith.com/

如果您调整窗口的宽度和高度，图像会根据它们的纵横比保持与 w/h 成比例。图像始终以一致的高度加载，使此幻灯片看起来非常漂亮。

还请注意，当仅缩小浏览器窗口的宽度（不是宽度和高度一起）时，如何调整更宽的图像（相对于较薄的图像） - 图像从上边距向下反弹。

他的编程方式似乎与我见过的大多数响应式 jquery 图像插件不同。有一个父 div 容器，但它具有静态大小，并且似乎无法控制其子图像的位置/大小。

查看源代码，图像顶部、左侧、宽度、高度 css 属性正在动态更改。

关于如何做到这一点的任何建议？

【问题讨论】：

你应该尝试使用 CSS 来做到这一点。我确信这是可能的。试着搜索一下。所有这些 javascript 都是不必要的。

标签： javascript jquery html css image

【解决方案1】：

在该页面上看到的效果可以只用 html 和 css 来完成。不需要javascript。他使用百分比作为边距值，以便随着浏览器尺寸变小，计算出的包含图像的 div 的左右边距的像素大小也会变小。然后通过将 img 宽度设置为固定像素大小的最大宽度，比如 400 像素，它将确保它只会达到一定的宽度，就像在非常大的屏幕上一样。然后通过将“宽度”设置为可能 100% 的百分比，图像将自动调整为包含 div 的大小，因为该 div 正在响应浏览器的大小。像这样：

#inside  {
max-width: 300px;
margin: 0 auto;
margin-top: 20%;
margin-bottom: 20%;
}
#inside img  {
width: 100%
}

http://jsfiddle.net/wRNJ7/1/

【讨论】：

好的，这看起来不错。但是请查看http://www.gregparmasmith.com/12。仅按其宽度而不是按高度收缩浏览器。查看图像如何在调整大小的同时被推离顶部和底部边缘。这似乎使用的不仅仅是 css。
是的，你是对的。它必须使用 jquery 函数 $( window ).height();确定视口高度并相应地更改 css 高度值
我在这个线程stackoverflow.com/questions/23122854/…解决了一个类似的问题
我在这里找到了一个非常接近的解决方案：

【解决方案2】：

我在这个帖子中找到了一个非常接近的解决方案：

Vertically center image on page and maintain aspect ratio on resize

这是一个很好的工作演示：

Demo

html, body {height: 100%}

body {
    position: relative;
    padding: 0;
    margin:0;
    font-family: sans-serif;
}
.image {
    position: relative;
    left: 0px;      
    height: 100%;
    background-position: 50% 50%;
    background-size: cover;
    background-attachment: scroll;
    text-align: center;
}
.wrap {
    height: 100%;
    overflow: hidden;
    position: relative;
}
img {
  max-width: 70%;
  max-height: 70%;
  margin: auto;
  position: absolute;
  top: 0; left: 0; bottom: 0; right: 0;
}

这个效果是在没有任何 javascript 的情况下实现的，起初我认为这是可以撤消的。在这个演示中，调整大小的动作有点不同。在我尝试建模的原始网站 (http://www.gregparmasmith.com/12) 中，"clear" 仅在必要时才会调整大小，因此对于较薄的图像（例如 500x100）：当浏览器窗口做的很薄，不会发生收缩。仅当图像的宽度超过浏览器的宽度时才会调整图像大小。

在这个 jsfiddle 中，我想我可以注意到同样的动作正在发生，但它并不那么明显。

【讨论】：