ボックス内の画像のサイズと位置を変更して、ボックス全体を覆うようにするにはどうすればよいですかbackground-size: cover?
<div class="box" style="width: 100px; height: 100px;">
<img src="pic.jpg" width="413" height="325">
</div>
overflow:hiddenボックスに追加する必要があり、画像が必要であることはわかっていますposition: absolute。しかし、画像の適切な新しいサイズ、および左 + 上の位置を取得する式は何ですか?
価値があるのは、これを CSS だけで実行できるようになったことです...
にセットobject-fit: cover;するだけimg
imgでラップする必要さえありませんdiv!
img {
width: 100px;
height: 100px;
}
.object-fit {
display: block;
object-fit: cover;
}
.original {
width: auto;
height: auto;
display: block;
}<img src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Img 'squashed' - not good</p>
<img class="object-fit" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>object-fit: cover -
The whole image is scaled down or expanded till it fills the box completely, the aspect ratio is maintained. This normally results in only part of the image being visible. </p>
<img class="original" src="http://lorempixel.com/413/325/food" width="413" height="325">
<p>Original ing</p>この新しいプロパティの詳細については、このWeb プラットフォームの記事 を参照してください。
また、ここでは、プロパティのすべての値を示す上記の記事のフィドルobject-fitを示します。
非常に優れたブラウザー サポート (IE8+) を備えた img タグを使用した、背景サイズ カバーのシミュレーションに十分に近い、純粋な CSS ソリューション:
.container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
.container img {
position: absolute;
top: 50%;
left: 50%;
width: auto;
height: auto;
max-height: none;
max-width: none;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}<div class="container">
<img src="//lorempixel.com/400/200/sports/1/" />
</div>これは簡単かもしれません
jQuery
$('.box').each(function() {
//set size
var th = $(this).height(),//box height
tw = $(this).width(),//box width
im = $(this).children('img'),//image
ih = im.height(),//inital image height
iw = im.width();//initial image width
if (ih>iw) {//if portrait
im.addClass('ww').removeClass('wh');//set width 100%
} else {//if landscape
im.addClass('wh').removeClass('ww');//set height 100%
}
//set offset
var nh = im.height(),//new image height
nw = im.width(),//new image width
hd = (nh-th)/2,//half dif img/box height
wd = (nw-tw)/2;//half dif img/box width
if (nh<nw) {//if portrait
im.css({marginLeft: '-'+wd+'px', marginTop: 0});//offset left
} else {//if landscape
im.css({marginTop: '-'+hd+'px', marginLeft: 0});//offset top
}
});
CSS
.box{height:100px;width:100px;overflow:hidden}
.wh{height:100%!important}
.ww{width:100%!important}
これは、任意のサイズ/方向を処理する必要があり、サイズを変更するだけでなく、画像をオフセットします。すべてなしrelativeまたはabsoluteポジショニング。
フィドルを作った：http://jsfiddle.net/filever10/W8aLN/
また、「幅」と「高さ」を設定する代わりに、同じ効果を生み出すことができます（設定すると、このアプローチが壊れる可能性があります）：
min-width: 100%;
min-height: 100%;
また
min-width: (your desired percent of viewport width)vw;
min-height: (your desired percent of viewport height)vh;
と
overflow: hidden;
親で
:)
これが私のアプローチです：
//collect the nodes
var parent = $('.box');
var img = $('image', box);
//remove width and height attributes
img.removeAttr('width');
img.removeAttr('height');
//set initial width
img.attr('width', parent.width());
//if it's not enough, increase the width according to the height difference
if (img.height() < parent.height()) {
img.css('width', img.width() * parent.height() / img.height());
}
//position the image in the center
img.css({
left: parseInt((img.width() - parent.width())/-2) + 'px',
top: parseInt((img.height() - parent.height())/-2) + 'px'
});
https://developer.mozilla.org/en-US/docs/Web/CSS/background-sizeから:
cover
This keyword specifies that the background image should be scaled to be as small as possible while ensuring both its dimensions are greater than or equal to the corresponding dimensions of the background positioning area.
したがって、あなたは、width: 100%または のheight: 100%いずれかを作成することを検討していますdiv。したがって、次のロジックを使用できます。
var makeBackgroundCover = function (div) {
$(div + " img").css("height", "100%");
if ($(div + " img").width() < $(div).width()) {
$(div + " img").css({
"height": "auto",
"width": "100%"
});
}
}
次のフィドルは、この関数が水平方向と垂直方向の両方の画像で機能することを示しています。
これは純粋な css ソリューションです。以下を使用してラッパーを定義できます。
div.cover {
position: fixed;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
そして画像：
img.cover {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
min-width: 50%;
min-height: 50%;
overflow-x: hidden;
}
ここにライブの例があります:
background-size:coverとbackground-position:centerをエミュレートするために何かが機能するようにしました。
位置を変更したい場合は、画像の「上」と「左」のスタイルを変更するだけです
CSS
.box{
overflow:hidden;
position:relative;
}
.box img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
}
JS
$('.box').each(function() {
//aspect ratio of container
var boxRatio = $(this).height() / $(this).width();
//aspect ration of image
var imageRatio = $(this).children('img').height() / $(this).children('img').width();
//set width or height 100% depend of difference
if (imageRatio > boxRatio) {
$(this).children('img').css({"width":"100%","height":"auto"});
} else {
$(this).children('img').css({"height":"100%","width":"auto" });
}
});
この関数は、「ロード」および「サイズ変更」イベントでアクティブにする必要があります。
私はそれを行うべき以下の関数を作成しました。受け入れられた回答からロジックの一部を借りて、画像のサイズとコンテナーのサイズの比率を作成することで、どのコンテナーでも機能するように調整し、どちらが大きいかを比較して、どのサイズを調整するかを決定しました。'center' 引数も追加されました ('true' は中心、false はそれを上/左に設定します)。
translateX/Y で CSS3 を使用していますが、それがなくても簡単に動作させることができます。
コードは次のとおりです。
var coverImage = function(wrap, center) {
if (typeof center === 'undefined') {
center = true;
}
var wr = $(wrap),
wrw = wr.width(),
wrh = wr.height();
var im = wr.children('img'),
imw = im.width(),
imh = im.height();
var wratio = wrw / imw;
var hratio = wrh / imh;
//Set required CSS
wr.css({'overflow' : 'hidden'});
im.css({'position' : 'relative'});
if (wratio > hratio) {
im.width(wrw);
im.css({'height' : 'auto'});
if (center) {
im.css({
'top' : '50%',
'transform' : 'translateY(-50%)'
});
}
} else {
im.height(wrh);
im.css({'width' : 'auto'});
if (center) {
im.css({
'left' : '50%',
'transform' : 'translateX(-50%)'
});
}
}
}
jsfiddle をチェックアウトして、実際の動作を確認してください: https://jsfiddle.net/cameronolivier/57nLjoyq/2/
画像のサイズを変更せずに画像をボックスの中央に配置するには、次のコードを使用します。
.box {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
}
.box img {
width: 413px;
height: 325px;
position: absolute;
left: 50%;
top: 50%;
}
画像が収まるようにサイズを変更する場合は、次のコードを使用します。
.box {
width: 100px;
height: 100px;
}
.box img {
width: 100%;
height: auto;
}
画像の幅が高さよりも大きい場合、このコードは空白を残します。これらのどちらも機能しない場合は、画像を背景として設定し、background-size: cover;.
横長、縦長、長方形、正方形などの画像と任意のコンテナー サイズで動作するソリューションを探していた今日のように、この回答に出くわした人のために、以下に独自のコードを含めました。
これもレスポンシブに機能します。ウィンドウのサイズが変更されるたびに再度実行する必要があります。
JSFiddle :
HTML
<div class="test">
<div class="cover">
<img src="http://d2ws0xxnnorfdo.cloudfront.net/character/meme/cool-dog.jpg" width="590" height="590"/>
</div>
</div>
CSS
/* modify the width and height below to demonstrate coverage */
.test {
height: 300px;
position: relative;
width: 500px;
}
/* you will need the below styles */
.cover {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
JS
$('.cover').each(function() {
var containerHeight = $(this).height(),
containerWidth = $(this).width(),
image = $(this).children('img'),
imageHeight = image.attr('height'),
imageWidth = image.attr('width'),
newHeight = imageHeight,
newWidth = imageWidth;
if (imageWidth < containerWidth) {
// if the image isn't wide enough to cover the space, scale the width
newWidth = containerWidth;
newHeight = imageHeight * newWidth/imageWidth;
}
if (imageHeight < containerHeight) {
// if the image isn't tall enough to cover the space, scale the height
newHeight = containerHeight;
newWidth = imageWidth * newHeight/imageHeight;
}
var marginLeft = (newWidth - containerWidth)/2;
var marginTop = (newHeight - containerHeight)/2;
image.css({
marginLeft : '-' + marginLeft + 'px',
marginTop : '-' + marginTop + 'px',
height : newHeight,
width : newWidth
});
});
もちろん、これと同じことを行う Backstretch などのライブラリを使用することもできますが、私の目的にはこのソリューションの方が優れていることがわかりました (依存関係の増加なし、軽量化など)。