div (부트 스트랩)에 맞게 조정 및 이미지 크기

특정 크기 div에 맞는 이미지를 얻으려고합니다. 불행히도 이미지는이를 따르지 않고 대신 충분히 크지 않은 크기로 비례하여 축소됩니다. 이미지를 내부에 맞추는 가장 좋은 방법이 무엇인지 잘 모르겠습니다.

이 코드가 충분하지 않다면 더 많은 것을 제공 할 수 있고 내가 간과하고있는 다른 오류를 수정할 수 있습니다.

다음은 HTML입니다.

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

내 CSS

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

이미지 width및 height이미지를 명시 적으로 정의 할 수 있지만 결과가 가장 잘 보이지 않을 수 있습니다.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

... 당신의 의견에 따라, 당신은 또한 단지를 막지 수 overflow- 볼 이 예제를 높이 제한 이미지를보고 너무 넓은 때문에 잘라.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

이 방법을 시도하십시오.

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

최신 정보:

부트 스트랩 4에서는 img-responsive하게 img-fluid되므로 부트 스트랩 4 이용한 용액이다 :

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

것을 그냥 머리 위로 부트 스트랩 (4) 지금 사용하는 img-fluid대신img-responsive 문제가 발생하는 경우 사용중인 버전, 그래서 한 번 확인.

태그에 클래스 img-responsive를 추가하기 만하면 img부트 스트랩 3부터 적용됩니다!

나는 이와 같은 문제가 있었고 다음과 같은 간단한 해결책을 발견했습니다. 이미지에 약간의 패딩을 추가하면 div에 맞게 크기가 조정됩니다.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

나는 이것을 사용하고 나를 위해 일합니다.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

Bootstrap-4 를 찾는 분이 있다면 . 여기있어

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

대부분의 경우 부트 스트랩 프로젝트는 jQuery를 사용하므로 jQuery를 사용할 수 있습니다.

그냥와 폭과 부모의 높이를 취득 JQuery.offsetHeight()하고 JQuery.offsetWidth(),과와 자식 요소로 설정 JQuery.width()하고 JQuery.height().

반응 형으로 만들려면에서도 위 단계를 반복합니다 $(window).resize(func).