이미지를 세로로 가운데에 놓고 사용 가능하게 채우는 방법 width

가능한 한 큰 GIF를 페이지의 가운데에 표시하는 간단한 웹 페이지를 만들려고합니다. 이미지를 세로 가운데에 배치하고 싶습니다. 다음은 JSFiddle에 대한 링크입니다.이미지를 세로로 가운데에 놓고 사용 가능하게 채우는 방법 width

<!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

좋아요, 나는 다음 번에 그것을 기억하려고 노력할 것입니다. 내 질문도 정리해 주셔서 감사합니다! –

구출에 대한 flexbox!

#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 방법을 시도했지만 그것은 나에게 일어나지 않았다. 이제는 가능한 한 최선을 다해 화면을 채우기 만하면됩니다. 그렇게하는 것이 어떻습니까? 다시 한번 감사드립니다. –

background : src (image.jpg) 100 % 100 % no-repeat, –

고마워요. @KhrisAzuaje,이 방법이 다소 효과가 있지만 이미지가 원래 종횡비를 유지하지 않고 왜곡됩니다. 그걸 고칠 방법이 있니? –

는 의견

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 트릭 중심의 다양한 방법에 대한 좋은 기사를 가지고있는 (-50 %) 방법, 더 많은 정보를 번역 .

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

fiddle to play with

출처

2016-12-24 21:41:34

이미지를 세로로 가운데에 놓고 사용 가능하게 채우는 방법 width

답변

관련 문제