イメージを垂直方向にセンタリングして空き領域にする方法

できるだけ大きなGIFをページの中央に表示する簡単なWebページを作成しようとしています。イメージを垂直にセンタリングしたいと思います。ここにJSFiddleへのリンクがあります。イメージを垂直方向にセンタリングして空き領域にする方法

<!DOCTYPE html> 
<html> 
<head> 
    <title>Gandalf Sax Guy!</title> 
</head> 
<body> 
<style> 

body { 
    overflow: hidden; 
    background-color: black; 
    margin: 0; 
} 

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

</style> 

    <img src="http://eul.ddns.net/gandalf/gif.gif"/> 

    <audio autoplay sr> 
     <source src="http://eul.ddns.net/gandalf/sax.mp3"> 
    </audio>

イメージはできるだけ大きく、歪まず、動的に作業したいと思います。

ご覧のとおり、画像の上下に「黒いスペース」が同じになるようにしたいと思います。

出典

2016-06-15 Chris P

あなたの編集はセバスチャンの答えは下のコメント応答ではなく、あなたの質問に編集しなければなりません。 :-) – TylerH

さて、私は次回のためにそれを覚えようとします。私の質問をクリアしてくれてありがとう！ –

レスキューへのフレックスボックス！

#positioning-context { 
 
    display: flex; 
 
    align-items: center; 
 
    justify-content: center; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
}

<div id="positioning-context"> 
 
    <img src="https://placekitten.com/140/50" /> 
 
</div>

出典

2016-06-15 19:20:36

ありがとう！私はflexboxメソッドを試しましたが、それは私のために起こっていませんでした。今すぐできるように画面をいっぱいにするだけです。それをどうやってお勧めしますか？もう一度おねがいします！ –

背景：src（image.jpg）100％100％ノーリピート、 –

ありがとう@KhrisAzuaje、これは*動作しますが、ある程度画像は元のアスペクト比を維持せず歪んでいます。それを修正する方法はありますか？ –

（-50％）メソッドを翻訳、コメント欄に詳細

img { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    /* the above combined with translate -50% will.. 
 
    center it horizontally and vertically */ 
 
    transform: translate(-50%, -50%); 
 
    width: initial; /* no width setting will size it as its original size */ 
 
    width: 100%; /* control image size based on screen width */ 
 
    width: 50%; /* try all 3 to see */ 
 
    width: 17%; 
 
    /* dont mess with height and it will scale with the width */ 
 
    /* or only adjust height and let image width scale to it */ 
 
    /* height: 100%; */ 
 
}

<img src="https://i.stack.imgur.com/Dpd0U.jpg?s=48&g=1">

CSSのトリックは、センタリングの異なる方法に大きな記事があります。

https://css-tricks.com/centering-css-complete-guide/

fiddle to play with

出典

2016-12-24 21:41:34

イメージを垂直方向にセンタリングして空き領域にする方法

答えて

関連する問題