超大尺寸-如何拉伸图像? [英] Supersized - How to stretch images?

问题描述

我正试图扩大尺寸以免裁剪图像，并拉伸它们以使其宽度和高度100％填充背景(我不在乎图像是否变形).

I'm trying to get supersized not to crop images and stretch them to fill the background 100% in width and height (I don't care if the images get distorted).

我正在使用fit_always，因此图像不会被裁剪并在CSS中显示:

I'm using fit_always so the images don't get cropped and in the CSS:

#supersized img { 
    width:100%;
    height:100%;
    position:relative;
    display:none;
    outline:none;
    border:none;
 }

HTML

<script type="text/javascript">  
jQuery(function($){  
  $.supersized({  
    // Functionality
    slide_interval : 5000,
    transition : 1,
    transition_speed : 500,
    horizontal_center : 0,
    fit_always : 1,

    // Components                           
    slides : [ // Slideshow Images
              {image : '/img/main/home.jpg'},
              {image : '/img/main/home-2.jpg'},
              {image : '/img/main/home-3.jpg'},
              {image : '/img/main/home-4-test.jpg'},
              {image : '/img/main/home-4.jpg'}
             ]    
  });
});
</script>

工作正常，但是如果我调整浏览器窗口的大小，则width:100%和height:100%会被忘记"

Works fine, but if I resize the browser window the width:100% and height:100% gets "forgotten"

我想念什么?

推荐答案

容器宽度/高度可能会发生此问题.您已经将图像宽度的高度设置为100％.会工作的.如果您的容器的宽度/高度不是100％，那么图像就不会是.如果没有容器，则将100％用于body，html.

This problem can be happen for container width/height. You already set image width height to 100%. It will work. If your container isn't 100% in width/height then image can't be. If there is no container then use 100% for body,html.

这篇关于超大尺寸-如何拉伸图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！