调整图像作为视调整大小而不被切断面 [英] Resize Images as viewport resizes without sides being cut off

问题描述

我有一个CSS问题。我有一个形象，是1024x500像素。现在的问题是，当浏览器窗口/视口宽度的变化图像（1,024像素）的宽度以下，形象开始变得切断。现在，你可以看到，我当视大小低于1,024像素，并且它调整比例，但我的形象的两侧得到越来越多的浏览器调整大小（小）切断容器宽度设置为100％。

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).

谁能帮我把我的形象来调整像素动态像素（没有丢失任何原始图像的 - 无删减取舍）？

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 webpage and resize the browser window to see what I mean. Pay attention to the sides of the images getting cut away...

HTML：注意我原来的形象是1024x500

HTML: Note my Original image is 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%;
}

有关在浏览器窗口那张图像宽度低于：1,024：

For when the Browser window goes below the image width: 1024px:

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

有关小屏幕时，我的图片被切断：注意我原来的形象是1024x500

For smaller screens when my images are cut off: Note my Original image is 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;
    }
}

感谢您！

推荐答案

您使用：

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

这将使任何你指定的CSS动态调整基础上，最大宽度以适应其容器：100％的语句。如果您想不同的看法，因此改变最大宽度声明。

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.

这篇关于调整图像作为视调整大小而不被切断面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！