모바일에서의 위치 지정 문제

나는 psd 디자인에서 html 템플릿을 만들려고 노력 중이며, 모바일을 처음에는 지금까지 한 가지 문제로 훌륭하게 시작했습니다. 나는이 효과를 얻기 위해 절대적으로 배치 된이 이미지를 가지고있다. (이미지 첨부) 붕괴 메뉴를 위해 버튼을 작동시키는 이미지를 얻은 것은 이제 더 이상 작동하지 않으며 브랜드 링크도 아닙니다. 내가 가정하고있는 것은 메뉴와 브랜드가 이미지 뒤에 있으며 문제를 일으킬 수 있다고 가정합니다.하지만 Z- 인덱스를 사용하여 그 이미지를 전면에 표시하려고 시도했지만 여전히 동일합니다.모바일에서의 위치 지정 문제

이미지가 담긴 컨테이너가 있습니다. 이는 내가 이것을 채우기 위해 이미지를 원하기 때문에 250 픽셀 높이가 ... .. 나는 용기를 채우기 위해 그것을 가지고 있지만, 압착 보면서 나는 그것을 해결하는 방법을 알고하지 않았다

HTML :

<!-- start mobile-img --> 
    <div class="container-fluid"> 
    <div class="row"> 
     <div class="col-xs-12"> 
     <div class="top-img-container"> 
      <h1 class="img-caption">Bodybuilding is good for your health</h1> 
      <img class="img-fluid center-block top-img hidden-sm-up" src="images/slider-01.jpg" alt="Image"> 
     </div> 
     </div> 
    </div> 
    </div> 
<!-- end mobile-img -->

CSS :

.top-img-container{ 
    padding-top: 60px; 
    height: 250px; 
    min-width: 100%; 
    position: relative;; 
} 

.top-img{ 
    position: absolute; 
    top:0; 
    left: 0; 
    padding-top: 60px; 
    min-width: 100%; 
}

출처

2016-07-30 Ovidiu G

당신은 높이와 폭을 모두 채우려는? .. 그렇다면, 그것은 종횡비를 유지하는 것입니다. – LGSon

없애 정말 나쁜 브라우저 지원하며 주어진 높이를 가지고 수행 대신 div을 사용합니다. 때로는 자원 그러므로 div와 함께 img를 교체 할 때 하나의 방법으로, 자주 놓친 것을 보여주는, 마크 업에 설정됩니다하지만 물론

background-image 캔뿐만 아니라, CSS에 설정 될 수있다.

.top-img-container{ 
 
    padding-top: 60px; 
 
    height: 250px; 
 
    min-width: 100%; 
 
    position: relative;; 
 
} 
 

 
.top-img{ 
 
    height: 100%; 
 
    background-size: cover; 
 
    background-position: center; 
 
}

<!-- start mobile-img --> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
     <div class="top-img-container"> 
 
      <h1 class="img-caption">Bodybuilding is good for your health</h1> 
 
      <div class="img-fluid center-block top-img hidden-sm-up" style="background-image: url(http://f.tqn.com/y/bodybuilding/1/W/K/7/GettyImages-73539617.jpg)"></div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
<!-- end mobile-img -->

출처

2016-07-30 14:06:39 LGSon

대단히 고마워요! object-fit : cover도 작동하지만 일부 정보는 약간 씩 보였습니다. 브라우저 지원에 대해 언급 한 내용이 그렇게 좋지는 않습니다. –

@OvidiuG 오신 것을 환영합니다. :) – LGSon

다만,이 같은 이미지의 CSS에

object-fit: cover;

를 추가하고, object-fit 때문에

position: absolute; 
top:0; 
left: 0;

출처

2016-07-30 13:09:39

모바일에서의 위치 지정 문제

답변

관련 문제