이미지 크기를 조작하는 데 문제가 있음 + 부트 스트랩

Question

안녕하세요, 저는 여기에 약간의 손실이 있습니다.

나는이 웹 페이지를 다시하려고 해요 : 나 이미지에 문제가

:

여기처럼 내 결과가 어떻게 표시되는지를 보여줍니다. 나는 그것을 좋아할 것이지만 꽤 좋아 보인다. 그러나 나는 레퍼런스 이미지와 일치하는 높이를 얻지 못한다. 나는 css를 많이 필요로하지 않고 부트 스트랩 행에 잘 맞을 것이라고 생각했다.

<div class="content"> 
 
\t \t <div class="container-fluid"> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <h1>Lorem </br> Ipsumsz</h1> </br> <p>Lorem Ipsum dolor sit amet consecetur adipised do </br>   elusmod tempor incididunt. Adipised do eiusmod tempor.</p> 
 
\t \t \t \t </div> 
 
\t \t \t \t <div class="col-lg-6"> 
 
\t \t \t \t \t <h1 id="bigNumber">01</h1> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="row"> 
 
\t \t \t \t <div class="col-lg-8 col-lg-offset-4"> 
 
\t \t \t \t \t <img src="olu-eletu-27968.jpg" class="img-responsive center-block"> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div>

Answer 1

부트 스트랩 행에는 고유의 높이가 없습니다 :

여기 내 코드입니다. 그들은 당신이 그 (것)들에서 두는 무엇이든을 적합하기 위하여 확장 할 것이다. 따라서 .row에서 height 또는 max-height CSS 속성을 설정해야합니다.

다른 트릭은 자연 상태와 다른 자르기 및 종횡비로 이미지를 표시하고자하는 것입니다. 다시 말해 전체 이미지를 일부만 표시하고 싶지는 않습니다. You can do this과 <img>의 조합은 <div>이지만 음수 여백을 사용해야하기 때문에 일종의 해킹을 느낍니다. 이미지를 만드는 것이 더 쉽다고 생각합니다 background-imageusing CSS. 이 같은

시도 뭔가 :

<div class="content"> 
 
    <div class="container-fluid"> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
     <h1>Lorem <br> Ipsumsz</h1> <br> <p>Lorem Ipsum dolor sit amet consecetur adipised do <br>   elusmod tempor incididunt. Adipised do eiusmod tempor.</p> 
 
     </div> 
 
     <div class="col-lg-6"> 
 
     <h1 id="bigNumber">01</h1> 
 
     </div> 
 
    </div> 
 
    <div class="row" style="height: 300px;"> 
 
     <div class="col-lg-8 col-lg-offset-4" style="background-image: url('olu-eletu-27968.jpg'); background-position: center;"> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

PS. </br> 태그는 <br>이어야합니다. ` '은 (는) 잘못된 태그이며 브라우저에서 무시할 가능성이 큽니다.