调整图像大小作为视口调整大小而不切断边答案

【问题标题】：Resize Images as viewport resizes without sides being cut off调整图像大小作为视口调整大小而不切断边
【发布时间】：2012-07-26 05:55:07
【问题描述】：

我有一个 CSS 问题。我有一个 1024x500 像素的图像。现在的问题是，每当浏览器窗口/视口的宽度更改为低于图像宽度（1024 像素）时，图像就会开始被截断。现在如您所见，当视口大小低于 1024 像素时，我将容器宽度设置为 100%，并且它会按比例调整大小，但随着浏览器调整大小（更小），我的图像的边会越来越多。

谁能帮我让我的图片动态调整像素大小（不丢失任何原始图片 - 没有剪裁）？

查看我的webpage 并调整浏览器窗口的大小以了解我的意思。注意图像的侧面被切掉......

HTML：注意我的原始图片是 1024x500

 <div class="ei-slider">
 <ul class="ei-slider-large">
   <li>
   <img src="http://lamininbeauty.co.za/images/large/makeup.jpg" alt="Vertical Sunbed TanCan"/>
   </li>
 </ul>
 </div>

CSS：

大屏幕的普通 CSS

.ei-slider{
    position: relative;
    width: 1024px;
    height: 500px;
    margin: 0 auto;
}
.ei-slider-large{
    height: 100%;
    width: 100%;
    position:relative;
    overflow: hidden;
}
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: hidden;
    height: 100%;
    width: 100%;
}
.ei-slider-large li img{
    width: 100%;
}

当浏览器窗口低于图像宽度时：1024px：

@media screen and (max-width : 1023px){
    .ei-slider{
        width: 100%;
    }   
}

当我的图像被截断时，对于较小的屏幕：注意我的原始图像是 1024x500

@media screen and (max-width: 930px) and (min-width : 831px){
    .ei-slider{
        width: 100%;
    }   
    .ei-slider-thumbs li a{
        font-size: 11px;
    }
.ei-slider-large li{
    position: absolute;
    top: 0px;
    left: 0px;
    overflow: visible;
    height: 100%;
    width: 100%;
    }
    .ei-slider-large li img{    /*HERE IS MY PROBLEM*/
        width: 930px;
        height: 454px;
    }
}

谢谢！

【问题讨论】：

标签： css browser viewport image-resizing

【解决方案1】：

你使用：

max-width: 100%;
height: auto;
width: auto; /* for ie9 */

这将根据 max-width: 100% 语句动态调整您分配给 css 的大小以适应其容器。如果您有不同的喜好，请相应地更改最大宽度声明。

【讨论】：

感谢您的回答，但这并不完全符合我的要求...在屏幕左侧，它仍然会丢失像素，并且右侧有一个恼人的填充。 ..查看我上面链接的网站并调整大小...
你的网站好像被我屏蔽了，你能做一个jsfiddle来说明这个问题吗？
嘿，我发现我的代码有问题...您在上面提供的解决方案有效，问题是我包含的一个 javascript 文件控制了此处提到的滑块图像的宽度和高度...每当我排除该文件时，问题就会消失，并且可以很好地调整大小......因此，除非您非常了解 Jquery，否则您将能够提供帮助。感谢您的回答
很好，我们的人，如果你想对文件做一个 jsfiddle，我很乐意试一试。

【解决方案2】：

我有一个简单的解决方案。只需根据视口百分比给出宽度参数即可。

语法：

width: <Percentage>vw;

例子：

<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">

在这里，图像的高度是固定的，但宽度将调整为视口的 100%，无论其大小如何。

希望这会有所帮助:)

【讨论】：

【解决方案3】：

我遇到了同样的问题，因为我使用的是相同的 jquery 插件（即滑块）。我发现图像是从 Javascript 代码中传递的附加（内联）样式，实际上它只是向左移动并没有真正被切断。代码将动态值传递给标签，这些值是在重新/加载特定视口宽度时从图像本身获得的。作者在 .js 文件中使用了这个。

var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src'));  //gets the dimensions from the image

然后他像这样给图像留有边距

$img.css({marginLeft: imgDim.left}); //assigns a new margin-left, overrides any value set for this property in the .css file because it's inline

当视口宽度变小时，这总是一个负值。解决方法是设置

$img.css({marginLeft: 0});

之后对我来说效果很好，没有因更改而产生任何问题。祝你好运。

【讨论】：