CSS 在视口调整大小时调整图像大小而不会切断边
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11689745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize Images as viewport resizes without sides being cut off
提问by DextrousDave
I have a CSS problem. I have an image that is 1024x500 pixels. Now the problem is, whenever the browser window/viewport changes width below the width of the image(1024px), the image starts to get cut off. Now as you can see, I set the container width to 100% when the viewport size goes below 1024px, and it does resize proportionally, but the sides of my image get cut off more and more as the browser resizes(smaller).
我有一个 CSS 问题。我有一个 1024x500 像素的图像。现在的问题是，每当浏览器窗口/视口将宽度更改为低于图像宽度（1024 像素）时，图像就会开始被截断。现在如您所见，当视口大小低于 1024 像素时，我将容器宽度设置为 100%，并且它确实按比例调整大小，但是随着浏览器调整大小（更小），我的图像的边越来越多地被截断。
Could anyone help me get my image to resize dynamically pixel for pixel (without losing any of the original picture - no cut offs)?
任何人都可以帮助我让我的图像为像素动态调整大小（不会丢失任何原始图片 - 没有截止）？
Check out my webpageand resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...
查看我的网页并调整浏览器窗口的大小以了解我的意思。注意图像的侧面被切掉......
HTML: Note my Original image is 1024x500
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：
The normal CSS for large screens
大屏幕的普通 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%;
}
For when the Browser window goes below the image width: 1024px:
当浏览器窗口低于图像宽度时：1024px：
@media screen and (max-width : 1023px){
.ei-slider{
width: 100%;
}
}
For smaller screens when my images are cut off: Note my Original image is 1024x500
当我的图像被截断时，对于较小的屏幕：注意我的原始图像是 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;
}
}
Thank you!
谢谢！
回答by Ilan Biala
you use:
你用：
max-width: 100%;
height: auto;
width: auto; /* for ie9 */
This will make whatever you assign the css to resize dynamically to fit its container based on the max-width: 100% statement. If you would like it differently, change the max width statement accordingly.
这将使您分配 css 的任何内容都根据 max-width: 100% 语句动态调整大小以适应其容器。如果您希望不同，请相应地更改最大宽度语句。
回答by Enomatix24
I had the same problem because I'm using the same jquery plugin (ie-slider). I found out that the image is passed additional (inline) styles from the Javascript code and in fact it is just shifted-left and not actually cut off. The code passes dynamic values to the tag which are got from the image itself at the time of re/load in a particular viewport width. The author uses this in the .js file.
我遇到了同样的问题，因为我使用的是相同的 jquery 插件（即滑块）。我发现图像从 Javascript 代码中传递了额外的（内联）样式，实际上它只是向左移动，实际上并没有被切断。代码将动态值传递给标签，这些值是在特定视口宽度重新/加载时从图像本身获取的。作者在 .js 文件中使用了它。
var $img = $(this);
imgDim = _self._getImageDim( $img.attr('src')); //gets the dimensions from the image
He then gives the image a margin-left like so
然后他像这样给图像留了边距
$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
When the viewport width gets smaller this is always a negative value. The work around is to set
当视口宽度变小时，这总是一个负值。解决方法是设置
$img.css({marginLeft: 0});
It worked fine for me after, with no arising issues from the change. Good luck.
之后对我来说效果很好，没有因更改而出现问题。祝你好运。
回答by Enomatix24
I have a simple solution for that. Just give the width parameter in terms of view-port percentage.
我有一个简单的解决方案。只需根据视口百分比给出宽度参数。
Syntax :
句法 ：
width: <Percentage>vw;
Example :
例子 ：
<img src="Resources/Head.png" alt="" style="width: 100vw; height: 85px">
Here, the height of the image is fixed but the width will be resized to 100% of the view-port, whatever its size may be.
在这里，图像的高度是固定的，但宽度将调整为视口的 100%，无论其大小如何。
Hope this helps :)
希望这可以帮助 ：）
