휴대 기기에서 높이 조정

Question

여기에 사이트가 있습니다 : http://ideedev.co.uk/newseed/design/ 상단의 배너가 훌륭하게 작동합니다. 배너 이미지는 사이트의 너비와 텍스트가 중간 및 중앙에 떠있게됩니다. 모든 크기.

그러나 모바일 장치가 소형 인 경우 이미지 높이를 조정해야하므로 크기가 축소되어 텍스트의 가운데 부분에 여전히 고정되어있는 이미지의 비율이 유지됩니다. 누구든지 도와 줄 수 있습니까?

내 HTML은 여기에 있습니다 :

<div id="absolute1111" style=" background: url(<?php echo $feat_image; ?>);"> 
     <div class="centerd1111"> 
      <h1><?php the_title(); ?></h1> 
     </div> 
    </div> 

내 CSS는 여기에 있습니다 :

#absolute1111 { 
    position:relative; 
    width:100%; 
    height:50%; 
    display:table; 
    color: #fff; 
    background-size: cover !important; 
    background-repeat: no-repeat !important; 
    background-position: 50% !important; 
} 

.centerd1111 { 
    display:table-cell; 
    vertical-align:middle; 
    text-align:center; 
    height:500px; 
    padding: 0 50px 0 50px; 
} 

많은 감사합니다 :) 대신 배경 CSS 속성의

Answer 1

, 당신은 요소로 이미지를 넣을 수 있습니다, 이렇게하면 더 쉽게 조작 할 수 있습니다. 내 피들이라면. 하지만이 바이올린에 대해서는 모바일 용으로 만 만들 수 있으므로 모바일 디스플레이 용 @media 쿼리에이 내용을 적용해야합니다.

https://jsfiddle.net/bdv2L0a0/

이 바이올린, 나는 디스플레이가 이미지를 사용

.background img { 
    width: 100%; 
    height: auto; //default value, no need to declare this 
} 

Answer 2

작은되는 때 배경 이미지는 당신이 아래로 확장을 허용하지 않습니다 같은 이미지의 높이의 비율을 따를 것을 그것을 만든 좋은 이미지가 아닌 이미지 크기를 수동으로 조정해야하므로 화면 크기와 함께 이미지를 만들 수 있습니다.

HTML 브라우저에서 이미지를 사용하면 이미지 비율을 그대로 유지하면서 이미지 크기를 줄일 수 있습니다.

모바일 용 미디어 쿼리를 사용하여 이미지 높이를 조정하면 전체 이미지가 축소되고 전체 이미지가 표시됩니다.

@media only screen and (max-width: 500px){ 
    .centerd1111 { height: 180px; } 
} 

이 당신을 위해 작동하는지 알려줘 : 여기

는 동일한에 대한 코드입니다.

감사합니다. 이미지의 비율을 알고 있다면

Answer 3

(높이와 폭 사이의 비율), 당신은이 작업을 수행 할 수 있습니다

.your-container { 
    overflow: hidden; 
    height: 0; 
    padding-bottom: 46.406570842%; /* image height/image width */ 
} 

이 다른 뷰포트의 크기 비율을 유지 iframe을 삽입하는 데 사용되는 트릭입니다. padding 속성에 백분율 값을 지정하면이 백분율이 요소 폭에 적용된다는 사실을 기반으로합니다.

또한 텍스트를 가운데에 맞추기 위해 display: table을 줄 필요가 없습니다. 당신은이 작업을 수행 할 수 있습니다

.your-container { 
    text-align: center; 
    position: relative; 
} 
.your-centered-text { 
    position: absolute; 
    left: 0; 
    right: 0; 
    top: 50%; 
    transform: translateY(-50%); 
} 

는 this jsfiddle를 참조하십시오.