0

CSSに問題があります。1024x500ピクセルの画像があります。ここで問題となるのは、ブラウザウィンドウ/ビューポートの幅が画像の幅（1024px）を下回ると、画像が途切れ始めることです。ご覧のとおり、ビューポートのサイズが1024pxを下回ると、コンテナの幅を100％に設定し、それに比例してサイズを変更しますが、ブラウザのサイズが変更されると（小さい）、画像の側面がますます切り取られます。

誰かが私の画像をピクセルごとに動的にサイズ変更するのを手伝ってもらえますか（元の画像を失うことなく-カットオフなし）？

私のウェブページをチェックして、ブラウザウィンドウのサイズを変更して、私が何を意味するかを確認してください。画像の側面が切り取られていることに注意してください...

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;
    }
}

ありがとうございました！

4

3 に答える 3

8

あなたが使う：

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

これにより、cssに割り当てたものはすべて、max-width：100％ステートメントに基づいてコンテナーに合わせて動的にサイズ変更されます。別の方法で使用したい場合は、それに応じてmaxwidthステートメントを変更してください。

于 2012-07-27T15:23:25.073 に答える
2

そのための簡単な解決策があります。ビューポートのパーセンテージで幅パラメータを指定するだけです。

構文：

width: <Percentage>vw;

例 ：

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

ここでは、画像の高さは固定されていますが、幅は、サイズに関係なく、ビューポートの100％にサイズ変更されます。

お役に立てれば ：）

于 2018-01-11T07:27:45.413 に答える
0

同じjqueryプラグイン（つまり-slider）を使用しているため、同じ問題が発生しました。画像は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-08T08:45:05.253 に答える