web-dev-qa-db-ja.com

CSSは元のサイズを指定せずにdivを含むように画像を縮小します

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％に設定しようとしました。しかし、それはうまくいきません。

htmlcssscaling
41
Muteking

背景画像 を使用してこれを達成できます。

MDNから- 背景サイズ：含む ：

このキーワードは、両方の寸法が背景位置決め領域の対応する寸法以下であることを保証しながら、背景画像を可能な限り大きくするようにスケーリングすることを指定します。

デモ

CSS：

#im {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("path/to/img");
    background-repeat: no-repeat;
    background-size: contain;
}

HTML：

<div id="wrapper">
    <div id="im">
    </div>
</div>
53
dc5

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

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

Autoは、MaxSizeで指定したスペースを占めるために、幅と高さを増やします（または減らします）。それは、あなたや視聴者のブラウザが画像に対して持っているかもしれない画像のデフォルトを上書きします。 AndroidのFirefoxでは特に重要であることがわかりました。ピクセルまたはパーセンテージは最大サイズで機能します。高さと幅の両方を自動に設定すると、元の画像のアスペクト比が保持されます。

スペースを完全に埋めて、画像が元のサイズより大きくなることを気にしない場合は、2つの最大幅を最小幅に変更します：100％-これにより、スペースが完全に占有され、アスペクト比が維持されます。この例は、Twitterプロフィールの背景画像で見ることができます。

14
Woody Payne

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

 background-size: cover !important;

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

7
Chathuranga

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

#img {
  object-fit: cover;
}

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

3
Josh Werner

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

3
Nikhil Rathod

これが古い問題に答えることを願っています（CSSを使用せずに背景プロパティ）

Html

<div class="card-cont">
 <img src="demo.png" />
</div>

Css

.card-cont{
  width:100%;
  height:150px;
}

.card-cont img{
  max-width: 100%;
  min-width: 100%;
  min-height: 150px;
}
2
Moonis Abidi

これらのいくつかは私にはうまくいきませんでした...しかし、これはうまくいきました。将来、他の誰かを助けるかもしれません。 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");

    }
0
Blake

ブラウザサイズの変更に合わせて画像を拡大し、固定されたdivの隣にある最上部に留まるようにしたいWebページでは、1つのCSS行overflow:hidden;を使用するだけでうまくいきました。画像は完全に拡大縮小されます。

特に素晴らしいのは、これが純粋なcssであり、Javascriptがオフになっていても機能することです。

CSS：

#ImageContainerDiv {
  overflow: hidden;
}

HTML：

<div id="ImageContainerDiv">
  <a href="URL goes here" target="_blank">
    <img src="MapName.png" alt="Click to load map" />
  </a>
</div>
0
user4864716

私はこれを、より小さい画像と大きい画像の両方で使用しています：

.product p.image {
text-align: center;
width: 220px;
height: 160px;
overflow: hidden;
}
.product p.image img{
max-width: 100%;
max-height: 100%;
}
0
Flavio