divの固定背景画像

Question

私は背景画像を設定した画像タイルを作成しました。しかし、タイルサイズを変更しても、背景のタイルイメージもサイズが変更されます。タイルサイズに関係なく、背景イメージをフルイメージに維持する方法はありますか？比率は関係ありません。私は完全な画像を表示するためだけにタイルが必要です。

.activity-image { 
 
    border-radius: 12px; 
 
    width: auto; 
 
    height: 210px; 
 
    background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg'); 
 
    background-size: cover; 
 
} 
 
.tile { 
 
    background-color: #ffffff; 
 
    border-radius: 12px; 
 
    height: auto; 
 
    margin: 0 auto; 
 
}

<div class="tile"> 
 
    <div class="activity-image "></div> 
 
</div>

jsfiddle - https://jsfiddle.net/9hy3mcun/8/

Answer 1

代わりbackground-size: 100% 100%を使用することができます。第1の値はwidthであり、第2の値は背景のheightである。

.activity-image { 
 
    border-radius: 12px; 
 
    width: auto; 
 
    height: 210px; 
 
    background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg'); 
 
    background-repeat: no-repeat; 
 
    background-size: 100% 100%; 
 
}

<div class="tile"> 
 
    <div class="activity-image "></div> 
 
</div>

Answer 2

あなたはbackground-size: 100% 100%;を意味しますか？

JS Fiddle

Answer 3

を指定できアクティビティ-画像のための幅分とオーバーフローする.TITLE設定：隠されました。

.activity-image{ 
    border-radius: 12px; 
    width: auto; 
    height: 210px; 
    background-image: url('http://i.dailymail.co.uk/i/pix/2016/03/22/13/32738A6E00000578-3504412-image-a-6_1458654517341.jpg'); 
    background-size: cover; 
    background-repeat: no-repeat; 
    min-width: 900px; 
    } 

    .tile{ 
    background-color: #ffffff; 
    border-radius: 12px; 
    height: auto; 
    margin: 0 auto; 
    overflow: hidden; 
    }