52

jquery スライダーに表示されるさまざまなサイズの画像をアップロードできる Web サイトが必要です。含まれている div に画像を収める (縮小する) ことができないようです。これが私がそれを行うつもりの方法です

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org    /TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title> 
<link rel="stylesheet" type="text/css" href="Imtest.css"/>
</head>

<body>

<div id="wrapper"> 

<div id="im"><img src="Images/Scarpa2_1.jpg" /></div>

</div>  
</body>
</html>

そして、CSS

#wrapper {
    width: 400px;
    height: 400px;
    border: 2px black solid;
    margin: auto;
}

#im {
    max-width: 100%;
}

CSS で画像の最大幅を 100% に設定しようとしました。しかし、それはうまくいきません。

4

10 に答える 10

19

これは私が知っている古い質問ですが、これはいくつかの関連する Google 検索のトップ 5 に入っています。画像を背景画像に変更しないCSSのみのソリューションは次のとおりです。

width: auto;
height: auto;
max-width: MaxSize;
max-height: MaxSize;

「MaxSize」は、使用したいもののプレースホルダーでmax-widthありmax-height、ピクセルまたはパーセンテージで表されます。autoMaxSize で指定したスペースを占有するように、幅と高さを増加 (または減少) させます。これは、ユーザーまたは閲覧者のブラウザが画像に対して持っている可能性のある画像のデフォルトを上書きします。Android の Firefox では特に重要であることがわかりました。ピクセルまたはパーセンテージは最大サイズで機能します。高さと幅の両方を に設定するとauto、元の画像の縦横比が維持されます。

スペースを完全に埋めたいが、画像が元のサイズよりも大きくなってもかまわない場合は、2 つmax-widthの をに変更しmin-width: 100%ます。これにより、スペースを完全に占有し、縦横比が維持されます。この例は、Twitter プロフィールの背景画像で確認できます。

于 2015-06-07T22:34:20.677 に答える
8

幅と高さの両方が必要な場合は、試すことができます

 background-size: cover !important;

しかし、これは画像を歪めませんが、divを塗りつぶします。

于 2014-01-10T09:24:36.740 に答える
4

これが最善の方法だと思います。私はそれを試しましたが、非常にうまく機能します。

#img {
  object-fit: cover;
}

これが私が見つけた場所です。幸運を！

于 2016-11-21T20:38:23.663 に答える
3

とても簡単です。imgの幅を100％に設定するだけです

于 2013-09-04T06:19:51.923 に答える
0

私が使う：

オブジェクトフィット: カバー;
-o-object-fit: カバー;

高さと幅が固定されたコンテナーに画像を配置するには、これは私のスライダーにも最適です。ただし、それによっては画像の一部が切り取られます。

于 2015-05-12T07:52:33.000 に答える
0

これらのいくつかは私にはうまくいきませんでした...しかし、これはうまくいきました。将来、他の誰かを助けるかもしれません。CSSは次のとおりです。

    .img-area {
     display: block;
     padding: 0px 0 0 0px;
     text-indent: 0;
     width: 100%;
     background-size: 100% 95%;
     background-repeat: no-repeat;
     background-image: url("https://yourimage.png");

    }
于 2017-10-27T18:37:48.127 に答える