[英]Resize an image height dynamically according to viewport width
我如何使用jQuery通過視口的寬度動態更改圖像的高度。
舉個例子
當網站寬度為450px時,我想將圖像寬度從300更改為100。
另外,我正在使用timthumb調整圖像大小。
HTML代碼
<img src="timthumb.php?src=myimage.jpg&h=300&w=750&q=100" class="MyImages">
我如何使用jQuery來做到這一點?
這應該工作。 只需在jQuery獲取視口寬度后添加src屬性,然后在調整窗口大小時對其進行更新。
<img id="img1" src="" class="MyImages">
<script type="text/javascript">
$(function() {
update_image();
$( window ).resize(function() {
update_image();
});
});
function update_image(){
var width = $( window ).width();
if(width<450) { var picwidth=100; } else { var picwidth=300; }
$('#img1').attr('src','timthumb.php?src=myimage.jpg&h=300w='+picwidth+'&q=100');
}
</script>
回答您的問題:編輯圖像使其看起來像這樣:
<img src="" class="MyImages" data-src="myimage.jpg">
現在,您可以使用jQuery獲得正確的尺寸:
<script type="text/javascript">
$(function() {
$('img').each(function(){
update_image(this);
});
$( window ).resize(function() {
$('img').each(function(){
update_image(this);
});
});
});
function update_image(e){
var width = $( window ).width();
if(width<450) { var picheight=100; } else { var picheight=300; }
var image = $(e).attr('data-src');
$(e).attr('src','timthumb.php?src='+image+'&h='+picheight+'&q=100');
}
</script>
這樣,當您調整視口大小時,所有圖像都會更新。
如果您不兼容基於CSS2的舊瀏覽器(例如IE7),則可以編寫CSS3媒體查詢。
例如:
@media (max-width: 450px) {
.MyImages{width:100px;}
}
如果您想要純基於javascript / jQuery的解決方案:
function viewport() {
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
$(function(){
if(viewport().width<=450){
$(".MyImages").css("width":"100px");
}
});
如果要確保即使在調整瀏覽器大小時也可以使用:
$(window).on("resize",function(){
if(viewport().width<=450){
$(".MyImages").css("width":"100px");
}
});
注意:JavaScript方式比Browser上的CSS3解決方案昂貴。
您不需要jQuery。 只需將圖像的width和height屬性設置為所需的值即可:
<img src="myimage.jpg" id="varimage" width="100" height="200">
....
var img = getElementById("varimage");
img.height = 400;
img.width = 200;
和jQuery(這就是您所要求的):
$("#varimage").width(400);
$("#varimage").height(200);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.