.divの動作を画像のようにする

まず、「object-fit：contains;」という属性をシミュレートしました。縦に並んだストラットと属性「text-align：center」（IEありがとう）を使用してイメージを作成します。

があり、それを参照してください： http://codepen.io/babybackart/pen/vGQeoK

HTML：

<body> 
    <div class="plancheBox"> 
     <div class="strut"></div><!-- 
     --><img src="http://images.forwallpaper.com/files/thumbs/preview/23/236747__kitten-soft-fluffy-tender_p.jpg"> 
    </div> 
</body>

CSS：私はイメージを置くように、画像にテキストを追加したい

body{ 
    height: 100%; 
    width: 100%; 
    display: block; 
    text-align:center; 
} 

h1, h2{ 
    font-family: Arial, sans serif; 
    font-weight: 300; 
    color: white; 
} 

.plancheBox{ 
    background-color: green; 
    position: absolute; 
    display: block; 
    width: 90%; 
    height: 90%; 
    vertical-align: middle; 
} 

.strut { 
    height:100%; 
    display:inline-block; 
    vertical-align:middle; 
} 

.plancheBox img{ 
    max-height: 100%; 
    max-width: 100%; 
    vertical-align:middle; 
}

とブロック内のテキストボックス（テキストボックスは絶対的に画像の前に表示されます）。

そこを参照してください：http://codepen.io/babybackart/pen/BKGwZL

HTML：

<body> 
    <div class="plancheBox"> 
    <div class="strut"></div><!-- 
    --><div class="container"> 
      <img src="http://eskipaper.com/images/photo-cat-1.jpg"> 
      <div class="descriptionBox"> 
      <h1>Joe le chat</h1> 
      <h2>Post haec Gallus Hierapolim profecturus ut expeditioni specie tenus adesset, Antiochensi plebi suppliciter obsecranti ut inediae dispelleret metum, quae per multas difficilisque causas adfore iam sperabatur.</h2> 
      </div> 
     </div> 
    </div> 
</body>

はCSS：

body{ 
    height: 100%; 
    width: 100%; 
    display: block; 
    text-align:center; 
} 

h1, h2{ 
    font-family: Arial, sans serif; 
    font-weight: 300; 
    color: white; 
} 

.plancheBox{ 
    background-color: green; 
    position: absolute; 
    display: block; 
    width: 90%; 
    height: 90%; 
    vertical-align: middle; 
} 

.strut { 
    height:100%; 
    display:inline-block; 
    vertical-align:middle; 
} 

.container{ 
    max-height: 100%; 
    max-width: 100%; 
    display:inline-block; 
    vertical-align:middle; 
} 

.container img{ 
    max-height: 100%; 
    max-width: 100%; 
    display:inline-block; 
    vertical-align:middle; 
} 

.descriptionBox{ 
    background-color: blue; 
    position: absolute; 
    width: 60%; 
    margin: 0 20% 5% 20%; 
    bottom: 0; 
}

問題は私の.div ".container" は作用しないということです最初の例での私のイメージのように、窓の高さが小さいときには底部にあふれています。

主な質問：最初の例のイメージのように ".container"を動作させる方法はありますか？

余分な質問：テキストボックスのサイズとサイズを画像のサイズで固定するにはどうすればよいですか？

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

出典

2016-05-02 babybackart

コンテナのコンテンツとその内容に応じてコンテナのサイズを同時に調整しようとしています。これは動作しません。そのうちの1つは、いくつかの次元を設定する必要があります。あなたの例によると、それはコンテナに収まるはずのイメージなので、コンテナの寸法を決めてそれに合わせてイメージのサイズを合わせます。

CSS：

.container { 
    height: 100%; /* not max-height */ 
    width: 100%; /* not max-width */ 
    overflow: hidden; 
    position: relative; 
} 
.container img { 
    max-height: 100.1%; /* ".1" just to avoid small lines due to browser rendering */ 
    max-width: 100.1%; /* ".1" just to avoid small lines due to browser rendering */ 
    position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

position: absoluteは、同時にあなたのコンテナ内での位置を画像の「フィット」するために必要とされます。 50%は画像の左上隅をコンテナの中央に移動し、transformは画像を幅と高さの半分だけ戻して中央に配置します。

上記の情報は、OPによって提供された詳細情報のとおりです。

JS：

$('.plancheBox img').each(function() { 

    var $img = $(this), 
     $plancheBox = $img.closest('.plancheBox'); 

    $img.css({ 
    'max-height' : $plancheBox.height(), 
    'max-width' : $plancheBox.width() 
    }); 

    $img.closest('.container').css({'position' : 'relative'}); 

});

CSS：

[...] 

.container{ 
    display: table; 
    margin: 0 auto; 
    position: absolute; 
} 

.container img{ 
    max-height: 100%; 
    max-width: 100%; 
    width: auto; 
    height: auto; 
} 

.descriptionBox{ 
    background-color: blue; 
    position: absolute; 
    bottom: 5%; 
    right: 20%; 
    left: 20%; 
} 

[...]

例フィドル：場合jsfiddle.net/jpu8umd6/2

ポートラあなたは追加そのためのJSを必要とするだろうそれplancheBoxが可能です：jsfiddle.net/jpu8umd6/3

ブラウザのサイズを変更する場合は、CSS-の変更をリセットし、再度、必要な値を計算するイベントハンドラを追加、JSによって考慮されるべきです。
参照：jsfiddle.net/jpu8umd6/4

JS：

// calculateImageDimension() contains the JS described above 

var resizeEnd; 
$(window).on('resize', function() { 
    clearTimeout(resizeEnd); 
    resizeEnd = setTimeout(function() { 
    $(window).trigger('resize-end'); 
    }, 200); 
}); 

$(window).on('resize-end', function() { 

    $('.plancheBox img').css({ 
    'max-height' : 'none', 
    'max-width' : 'none' 
    }) 
    $('.plancheBox .container').css({'position' : ''}); 

    calculateImageDimension(); 
});

出典

2016-05-02 14:39:13 Seika85

は、あなたの答えのために非常に多くのSeika85ありがとう持つべきposition: absolute;を持っているので、あなたのソリューションは画像のために機能します。問題は、テキストボックスを修正するために画像と同じ時間にサイズ変更するコンテナが必要だったことです。 100％コンテナでは、テキストボックスを画像に固定することは不可能です。この解決策は、画像とテキストボックスにコンテナをまったく使用しないことと同等です。（私は十分にはっきりしていることを願っています） – babybackart

イメージラッパーを含むイメージラッパーが必要ですが、サイズに合わせてイメージに渡される親ディメンションも同時に反映されます。これは純粋なCSSでは不可能です。私は、この例で使用したようにJSを必要とします：https://jsfiddle.net/jpu8umd6/2/ – Seika85

私は矛盾しているように私の質問との闘いを理解しています... 私は実際にテキストボックスをそのコンテナの関数でサイズ変更される画像。たぶん、コンテナを使わずにJSを使ってイメージにテキストボックスを修正することができます。そのため、イメージは最初の例のようにオーバーフローせずに ".plancheBox"に収まるでしょうか？ – babybackart

.descriptionBoxは（周囲の）.containerはおそらくposition:relative;

https://codepen.io/eye-wonder/pen/EKGPmZ

出典

2016-05-04 09:22:12

あなたの例と最初のコードペインOPの画像サイズで？それが彼が達成しようとしているものなので。あなたの例では、イメージは希望の寸法と重なり、ラッピング要素はその子に応じて縮尺されます。 – Seika85

あなたの答えは@驚きありがとうございます、あなたは正しい、位置：コンテナの相対的な私は画像にテキストボックスを修正することができました。しかし、それはイメージのカットを解決していないようです。ウィンドウの高さが小さい場合、イメージはコンテナからオーバーフローします（イメージの不透明度を0.5に設定すると、イメージが表示されます）。 – babybackart

Safari（9）とFirefox（44）os xは私のコードペインを別々にレンダリングします。私はイメージがそれらのいずれかにカットされて見ることができません。ページをスクロールすると、画像全体が表示されます。 –

.divの動作を画像のようにする

答えて

関連する問題