web-dev-qa-db-ja.com

CSS：親<div>全体をカバーするように<image>をスケーリングする方法は？

質問：

http://jsfiddle.net/Log82brL/15/

<img>は、min-width:100%で期待するようなラッピングを縮小しません。

高さまたは幅がコンテナに一致するまで<img>を縮小しようとしています

<iframe>の任意の場所をクリックして、コンテナの形状を切り替えます

<img> CSSを編集してみてください：

1）アスペクト比を維持する

2）コンテナーDIVの表面領域全体をカバーする

3）画像のみ編集

このセンタリングアプローチはちょっとスケッチに見えますが、かなり堅牢です

私の質問は特に：親<img>のサイズが変更されても、親<div>の<div>をFILL（アスペクト比は維持するが、表面全体をカバーする）にスケーリングします。

多分私はどういうわけかCSSフレックスボックスレイアウトまたは何かを使用できますか？多分変換？

[〜＃〜]回答[〜＃〜]：

http://jsfiddle.net/Log82brL/17/

HTMLソースを透明なbase64ピクセルに設定（クレジット CSS Tricks ）

<img id="img" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" />

CSS背景プロパティを使用する

#img {
    width: 100%;
    height: 100%;
    background: url(http://i.imgur.com/0BBsCUB.gif) no-repeat center;
    background-size: cover;
}
javascripthtmlimagecss
14
neaumusic

コンテナに触れたくない場合は、背景を<img>

#img
{ 
  background: url(imgpath) no-repeat center;
  background-size: cover;
}
8
Rakesh Sadhula

http://jsfiddle.net/Log82brL/7/

#img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

object-fit：カバーにより、要素のコンテンツボックス全体を埋める間、置き換えられたコンテンツは縦横比を維持するサイズになります。具体的なオブジェクトサイズは、要素の使用されている幅と高さに対するカバー制約として解決されます。

9
2ne

HTML backgroundの代わりにCSS imgを使用できます。

.myDiv
{
  height: 400px;
  width: 300px;
  background-image: url('image-url.png');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  border: 1px solid #000000;
}

<div class="myDiv">
</div>

これが JS Fiddle Demo です。
heightとwidthを変更してみてください-画像がdivに収まるように伸びているのがわかります。

別のbackground-size値：

  1. 含む比例ストレッチ：background-size: contain;
    長すぎるdiv
    divが広すぎます

  2. 塗りつぶす比例ストレッチ：background-size: cover;
    長すぎるdiv
    divが広すぎます

  3. 100％になるまでストレッチ：background-size: 100% 100%;
    長すぎるdiv
    divが広すぎます

3
Yeldar Kurmangaliyev

単一のcssの背景省略形プロパティを使用する

.myDiv
{
  height: 400px;/*whatever you want*/
  width: 300px;/*whatever you want*/
  background: url('image-url.png') no-repeat center center;
  background-size: contain;
}

<div class="myDiv">
</div>
3
Akhilesh Kumar

bootstrapソリューションを試してみましたか

http://getbootstrap.com/css/#images-sensitive

それはかなりです

.img-responsive
{
max-width: 100%;
height: auto; 
display: block;
}

更新の質問に追加する

http://jsfiddle.net/arunzo/Log82brL/5/

.skinny>img
{
    max-width:none !important;
    min-height:none !important;    
    max-height:100%;
    -webkit-transform:translate3d(+50%, +50%, 0);
}

それでも、あなたが何を求めているのかわからないのですが、ぎくしゃくしたアニメーションで申し訳ありません。

2
Riddler

回答を更新しました。意図したとおりに機能するようになりました。

var toggle = false,
    containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
#container {
    overflow: hidden;
    width: 400px;
    height: 200px;
    transition: all .5s;
    margin: 0 auto; /* this is just for demonstration purposes */
}
#container.skinny {
    width: 200px;
    height:600px;
}
#img {
    height: auto;
    left: 50%;
    margin: auto;
    min-height: 100%;
    position: relative;
    top: 50%;
    transform: translate(-50%, -50%); /* changed to 2d translate */
    width: 100%; /* full width in wide mode */
}

#container.skinny #img {
    width: auto; /* width reset in tall mode */
}
<div id="container">
    <img id="img" src="http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg" />
</div>
1
IMI

http://krasimirtsonev.com/blog/article/CSS-Challenge-1-expand-and-center-image-fill-div

含まれ、中央揃え

私はこれがあなたが得ようとしているレンダリングだと思います、これは役立つかもしれません;）

https://jsfiddle.net/erq1otL4/

<div id="container" style="background-image: url(http://farm8.static.flickr.com/7440/12125795393_3beca9c24d.jpg);"></div>   

#container.skinny {
width: 400px;
height:600px;
}
#container {
    width: 400px;
    height: 200px;
    overflow: hidden;
    background-size: cover;
    background-color:pink;
    background-position: center center;
}

var toggle = false,
containerElement = document.querySelector("#container");
window.onclick = function () {
    containerElement.className = (toggle = !toggle ? "skinny" : "");
}
window.alert("click anywhere to toggle shapes. img is a large square");
1
Fundhor

しばらく前に、私は backstretch というjQueryソリューションを見つけました。これはCSS3で可能に見えます。リンクされたページから：

html { 
  background: url(images/bg.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}
1
berto

通常、使用する必要があることを達成するには：

parentdiv img {
   width:100%;
   height:auto;}

親divで画像のサイズを変更するため。

これにより、オーバーフローを非表示に設定すると、（視覚的に）トリミングの問題が発生する可能性があります。

0
Pierre Irani

これを試して：

<div class="img_container">
   <img src="image/yourimage.jpg" alt="" />
</div>

<style type="text/css">
   .img_container{
      width: 400px;
      height: 400px;
      overflow: hidden;
    }
   .img_container img{
       width: 100%;
       height: auto;
     }
 </style>

高さまたはwith autoを設定しても、画像は引き伸ばされたように見えません。

0
dianne_ldrs

このクラスのBootstrap .img-sensitiveを使用します。親divが変更された場合、メディアクエリを画像とdivの両方に追加します

0
Shashank

ImgLiquidを使用できます https://github.com/karacas/imgLiquid

$(function() {
    $(".imgLiquidFill").imgLiquid({
        fill: true,
        horizontalAlign: "center",
        verticalAlign: "top"
    });    
    $(".imgLiquidNoFill").imgLiquid({
        fill: false,
        horizontalAlign: "center",
        verticalAlign: "50%"
    });
});
.boxSep{
    background-color:#f7f7f7;
    border: 2px solid #ccc;
    margin:10px;
    display:inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgithub.com/karacas/imgLiquid/master/js/imgLiquid-min.js"></script>

<div class="boxSep" >
    <div class="imgLiquidFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>

<div class="boxSep" >
    <div class="imgLiquidNoFill imgLiquid" style="width:250px; height:250px;">
        <img alt="" src="http://www.juegostoystory.net/files/image/2010_Toy_Story_3_USLC12_Woody.jpg"/>
    </div>
</div>

実際の表示： http://codepen.io/karacas/pen/nlugd

0
karacas

これは、imgタグの属性を変更する必要のない非常にシンプルなCSSソリューションです。

div{
            background-image: url("http://www.frikipedia.es/images/thumb/d/d5/Asdsa-asdas.jpg/300px-Asdsa-asdas.jpg");
            height: auto;
            width: 400px;
            overflow: hidden;
            background-size: cover;
            background-position: center;
        }
0
ytpillai