调整图像大小调整图像大小而不切断边框

问题描述：

我有一个CSS问题。我有一个1024x500像素的图像。现在的问题是，无论何时浏览器窗口/视口宽度低于图像宽度（1024px），图像开始被切断。现在您可以看到，当视口大小低于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; 
    } 
}

谢谢！

答

你使用：

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

这将使任何你指定的CSS动态调整基础上，最大宽度以适应其容器：100％的语句。如果您不同意，请相应地更改最大宽度语句。

谢谢你的回答，但它并不完全是我想要它做的......在它仍然失去像素在屏幕的左侧，有一个恼人的填充上右侧...看看我上面链接的网站并调整大小... – DextrousDave 2012-07-27 15:41:00

你的网站似乎被我拦截，你可以做一个jsfiddle来说明问题吗？ – 2012-07-27 16:08:24

嘿，我发现问题与我的代码...上面给出的解决方案的工作，问题是与我包括一个JavaScript文件，管理这里提到的滑块图像的宽度和高度...每当我排除该文件，问题就消失了，它调整得很好......所以除非你很了解Jquery，否则你可以提供帮助。感谢您的回答 – DextrousDave 2012-07-28 12:12:49

答

我有同样的问题，因为我使用相同的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});

它对我以后的工作很好，没有从变化中产生的问题。祝你好运。

答

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

语法：

width: <Percentage>vw;

实施例：

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

在此，图像的高度是固定的，但宽度将被调整到视图端口的100％，不管其尺寸可以是。

希望这有助于:)

调整图像大小调整图像大小而不切断边框

相关推荐