基于浏览器窗口尺寸自动调整图片大小 [英] Auto image resize based on browser window dimensions

问题描述

我有一个基本的网页布局，100％宽的标题和一个粘性页脚。

I have a basic web page layout with a 100% width header and a sticky footer. In between the two I have a large graphic.

我想根据窗口大小动态调整图形大小。

I would like the graphic to resize dynamically depending on the size of the window.

我不喜欢使用flash，并且想知道是否有一个简单的方法来使用jquery / javascript。

I prefer not to use flash, and was wondering if there is an easy way to do this with jquery/javascript.

我不太jquery / javascript专家，所以我想知道如何处理这个有一个组件已经有它。

I'm not much of a jquery/javascript expert so I was wondering how to approach this of there is a component out there that already does it.

推荐答案

<style>
.wrapper {width:58.536585%; /*960/1640 = .58536585*/ margin:0 auto;}
.resize {width:100%; height:auto;}
</style>    

<div class="wrapper">
  <img class="resize" src="image.jpg" />
</div>

这将调整图像大小以匹配您的容器，并保持比例。

This will resize your image to match your container and keep the ratio in place. If you set the container to a percentage everything will scale.

包装宽度= 960px除以屏幕宽度= 1640px

wrapper width = 960px divided by screen width = 1640px

如果你想让整个网站回应，你必须做数学一路下来。将子元素除以它的父元素。希望这有助于！

If you want the entire site to be responsive you have to do the math all the way down. divide the child by it's parent. Hope this helps!

这篇关于基于浏览器窗口尺寸自动调整图片大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！