자막이있는 이미지 - 어떻게 스트레칭하고 가운데에 배치합니까?

이미지가 좋았을 때 나는 훌륭한 작업 솔루션을 가졌습니다. 이미지를 중심에 놓을 수 있었고 그런 방식으로 늘릴 수도있었습니다. 컨테이너보다 크지 않고 크기도 작았습니다 (비율을 보존했습니다) .자막이있는 이미지 - 어떻게 스트레칭하고 가운데에 배치합니까?

이제 이미지 아래에 캡션을 추가하고 싶습니다. 캡션은 글꼴 크기에 따라 공간을 사용하고 이미지는 컨테이너 공간에서 왼쪽으로 늘어납니다. 그리고 나는 그것을 할 수 없다.

내 이전 솔루션

(나는 단지 높이에 제약을 왼쪽) - 작동하지, 지금 :

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <span style="display: inline-block; height: 100%; vertical-align: middle;"></span> 
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img> 
    <br/><span style="">TEST</span> 
</div>

다른 시도,하지만 그들은 더 나쁜 일, 이미지는 어떤 어떤 방식으로 뻗어되지 않습니다. table-cell

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <div style="display:table;width:100%;height:100%;max-height:100%;"> 
     <div style="vertical-align:middle;display:table-cell;max-height:100%;"> 
      <img style="display:inline;max-height:100%;" src="icons/speaking.png" ></img> 
     </div> 
    </div> 
</div>

또는 figure와 table - 정말 차이가 없습니다 :

<div style="border: 1px solid;box-sizing: border-box; width: 1000px; padding: 8px; height: 200px; text-align: center; " > 
    <div style="display:table;width:100%;height:100%;max-height:100%;"> 
     <figure style="vertical-align:middle;display:table-cell;max-height:100%;"> 
      <img style="max-height:100%" src="icons/speaking.png" ></img> 
      <figcaption style="">TEST</figcaption> 
     </figure> 
    </div> 
</div>

중요 : 나는 작업 솔루션, 모든 솔루션을 가지고 있지 않지만, 나는 어떤없이이 문제를 해결하려고 컨테이너를 제외한 고정 값. 그 이유는 크기 조정이 발생할 때마다 콘테이너의 크기와 콘텐트의 크기를 적절하게 설정했기 때문입니다.

Container is bigger

큰 용기, 이미지는 높이가 너무 큰 것이 있기 때문에 (이상한 모양 내 김프 기술의 결과 일 수 있음), 100 %로 폭이 맞지 않는, 거의 전체 높이를 차지

작은 컨테이너, 이미지가 압축됩니다. 아직도 텍스트가 보존 될 여지가 있습니다. (비교하여) 업 스케일링 같은

Image is smaller

텍스트 보이지만, 그것의 크기는 동일하다 - 이미지 만이 압착되고, 용기가 작다.

출처

2014-12-21 greenoldman

어떻게'의 위치를 설정하는 방법에 대한 : absolute'를 캡션에? – Danield

@Danield, 문제 없지만 어떻게 해결 될까요? – greenoldman

지원하려는 브라우저에서 flexbox를 사용할 수 있다면 다음과 같은 방식으로 구현할 수 있습니다. 이미지 대신 <img> 태그를 사용하는 대신 background-image과 함께 background-position: center center 및 background-size: contain을 사용하여 이미지를 가운데에 맞춰서 스트레치했습니다. <img> 태그를 사용하여 구현할 수 있는지 알아 보는 것이 좋습니다.

컨테이너 .media 클래스에 display: flex 및 flex-direction: column을 추가했습니다. 을 .media__image 클래스에 추가하면 전체 높이를 사용할 때까지 이미지 컨테이너가 커집니다.

.media { 
 
    display: flex; 
 
    flex-direction: column; 
 
    
 
    width: 200px; 
 
    height: 200px; 
 
} 
 

 
.media__image { 
 
    flex-grow: 1; 
 
    
 
    background: url('http://placehold.it/150x100') center center no-repeat; 
 
    background-size: contain; 
 
    background-color: #f99; 
 
} 
 
.media__caption { 
 
    background-color: #9f9; 
 
    text-align: center; 
 
    font-family: Helvetica, Arial, sans-serif; 
 
    padding: 0.5em; 
 
    color: #333; 
 
}

<div class="media"> 
 
    <div class="media__image"></div> 
 
    <div class="media__caption"> 
 
    Caption 
 
    </div> 
 
</div>

다른 크기의 용기, 이미지 및 글꼴을 사용하여 세 가지 예제에 대해이 Codepen를 참조

. 사용 인 flexbox에 대한 배경 정보

출처

2014-12-21 10:47:17 ckuijjer

고맙습니다. 나는 읽은 모든 케이크를 이해하고, 나머지 하나의 문제를 해결하려고합니다. - 컨테이너를 큰 높이로 설정하면 (이미지의 높이의 두 배라고 가정 해 봅니다), 캡션은 맨 아래에 놓입니다. 이미지의 바로 아래 (바로 아래)가 아닌 컨테이너. – greenoldman

그게 내가 두려워하는 것이 더 어려울 수도 있습니다. 현재'flex-grow : 1'은'.media__image'가 캡션을 추가 한 후'.media' 컨테이너에 남아있는 것을 가져옵니다. 높이 제한이있는 경우 세로 방향으로 늘리거나 줄이기 위해 일반 ''태그를 가져 오는 데 문제가있었습니다. 아마 flexbox를 사용하지 않고도 작동하도록 알 수있을 것입니다.작은 이미지를 가져오고 너비와 높이가 제한된 컨테이너에 맞도록 큰 이미지를 축소해야한다고 가정하면 맞습니까? – ckuijjer

예, 그렇습니다. 그러나 비율을 유지하면서, flexbox에'img '를 직접 추가하는 순진한 접근법은 효과가 없습니다 (이미 확인했습니다). 이것은 당신이 이미 달성 한 것입니다 :-) – greenoldman

내가 맞다면 캡션에 특정 글꼴 크기를 설정하고 이미지의 크기를 캡션의 동일한 너비에 맞게 다시 지정하여 가로 세로 비율을 유지하십시오.

이 경우에는 두 개의 TR 및 한 개의 TD가있는 테이블을 사용하는 것이 좋습니다. 첫 번째 행 (TR)에 이미지를 넣고 두 번째 행에 캡션을 넣습니다. TABLE, TD 또는 TD의 폭을 정의하지 마십시오. 따라서 두 번째 행의 캡션에 글꼴 크기를 지정하면 열의 너비가 해당 크기로 설정되고 너비가 100 % 인 이미지는 TD 크기에 따라 자체 설정됩니다. 예를 들어

<Table> 
 
<TR> 
 
    <img style="display:inline-block; max-height:100%; " src="icons/speaking.png" ></img> 
 
    <TD></TD> 
 
</TR> 
 
<TR> 
 
    <TD> 
 
     <br/><span style="">TEST</span> 
 
    </TD> 
 
</TR> 
 
<Table>

출처

2014-12-21 09:13:26

고맙습니다. 현재 작동하지 않습니다 (콘텐츠는 어떤 방식으로도 중앙에 있지 않고 이미지가 늘어나지 않습니다). 그러나이 방법도 살펴 보겠습니다. – greenoldman

은 정말 혼란 스러워요 ..

을 그냥 내가 어떻게 지금에 대해 얘기하고 생각 나는 달성 한 간단한 HTML 태그를 추가하여 귀하의 질문은 매우 불분명합니다.

<html> 
<head> 
<style> 
span { 
font-size: 100px; 
} 
</style> 
</head> 
<body> 
<center><img src="http://i.imgur.com/S2E4MDu.png"/> 
<br/><span style="">TEST</span></center> 
</div> 
</body> 
</html>

이 나를 위해 내용과 범위를 중심으로 그렇게 모두 할 남은 당신이 찾고있는 크기로 선언 스팬 ..

편집에 대한 CSS에서 스타일을 추가 할 수 있습니다 : 컨테이너 안에 문제가 있다는 것을 알았습니다. 그래서 나는 이것도 테스트했습니다.

.container { 
position: relative; 
width: 100%; 
border: 1px solid red; 
} 
.container img { 
width: 500px; 
height: 500px; 
}

는 단순히 이미지

<div class="container"> 
<center><img src="http://i.imgur.com/S2E4MDu.png"/> 
<br/><span style="">TEST</span></center> 
</div>

주위에 컨테이너를 포장 그리고 우리는 설정해야합니다.

출처

2014-12-21 10:15:41 Placeholder

고마워요,하지만 다른 방법입니다 - 컨테이너에 크기가 설정되어 있고 이미지가 늘어나야합니다. 접근하는 동안 이미지의 크기를 설정하면 컨테이너가 늘어납니다. 업데이트 된 질문을 참조하십시오. – greenoldman

자막이있는 이미지 - 어떻게 스트레칭하고 가운데에 배치합니까?

답변

관련 문제