調整圖像大小調整圖像大小而不切斷邊框

我有一個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; 
    } 
}

謝謝！

來源

2012-07-27 DextrousDave

你使用：

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

這將使任何你指定的CSS動態調整基礎上，最大寬度以適應其容器：100％的語句。如果您不同意，請相應地更改最大寬度語句。

來源

2012-07-27 15:23:25

謝謝你的回答，但它並不完全是我想要它做的......在它仍然失去像素在屏幕的左側，有一個惱人的填充上右側...看看我上面鏈接的網站並調整大小... – 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});

它對我以後的工作很好，沒有從變化中產生的問題。祝你好運。

來源

2013-08-08 08:45:05 user2663630

我有一個簡單的解決方案。只需根據視口百分比給出寬度參數即可。

語法：

width: <Percentage>vw;

實施例：

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

在此，圖像的高度是固定的，但寬度將被調整到視圖端口的100％，不管其尺寸可以是。

希望這有助於:)

來源

2018-01-11 07:27:45

調整圖像大小調整圖像大小而不切斷邊框

回答

相關問題