휴대 기기에서 부트 스트랩 이미지 스트레치

Question

BS4를 사용하면 컨테이너의 모든 요소 (예 : div, h1 등)를 유지하면서 모바일에서 화면 테두리로 이미지를 늘릴 수 있습니까?

제 문제는 미디어 쿼리로 컨테이너 폭을 쉽게 변경할 수 있지만 모든 요소에 영향을 미친다는 것입니다. 또한 이미지는 바탕 화면의 테두리까지 늘어나서는 안되며, 따라서 일반 컨테이너 - 유체 만 사용할 수는 없습니다.

는 또한과 같이 음의 여백을 사용하여 시도 :

@media (max-width: 575px) { 
 
    .mobile-stretch { 
 
    margin-left: -15px; 
 
    margin-right: -15px; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 
 

 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div>

오른쪽에있는 경계를 유지하면서하지만 그것은 단지, 왼쪽 테두리에 뻗어 이유는 확실하지. 내가 뭘 놓치고 있니?

Answer 1

컨테이너 대신 컨테이너 유체 클래스를 추가하고 컨테이너 클래스의 다른 것들은 가운데에 추가합니까?

.no-gutters { 
 
    margin-right: 0; 
 
    margin-left: 0; 
 
    > .col, 
 
    > [class*="col-"] { 
 
    padding-right: 0; 
 
    padding-left: 0; 
 
    } 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
 

 
<div class="container-fluid"> 
 
    <div class="row no-gutters"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div> 
 
<div class="container"> 
 
    <div class="row"> 
 
    <div class="col-12"> 
 
     <img src="http://via.placeholder.com/850x120" class="img-fluid mobile-stretch" /> 
 
    </div> 
 
    </div> 
 
</div>