부트 스트랩에서 이미지가 오버플로되는 것을 어떻게 막을 수 있습니까?

-1

jumbotron 내부에 설명이있는 축소판 아이콘을 만들려고하는데 아무 것도 작동하지 않습니다. 제발 내가 뭘 잘못했는지 말해 주 시겠어요? 부트 스트랩에서 이미지가 오버플로되는 것을 어떻게 막을 수 있습니까?

<div class="container"> 
    <div class="row"> 
     <div class="col-md-12"> 
     <div class="jumbotron"> 
<h1 class="text-center">Kevin Mitnick</h1> 
<h3 class="text-center">The World's Most Famous hacker</h3> 
    <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture"> 
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div> 
      </div> 
</div> 
</div> 
</div> 
</div>

와 CSS :

당신이 당신의 이미지 크기를 조정하거나 IMG 태그에 폭과 높이 스타일을 추가 할 필요가

body { 
    margin-top: 60px; 
}

출처

2017-02-15 George Kech

이미지에 최대 너비/높이를 추가 해보십시오. – Pete

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-md-4"> 
 
     <div class="jumbotron"> 
 
<h1 class="text-center">Kevin Mitnick</h1> 
 
<h3 class="text-center">The World's Most Famous hacker</h3> 
 
    <div class="thumbnail"><img src="https://i.ytimg.com/vi/Nn3O8XD1z0w/maxresdefault.jpg" alt="Kevin's Picture"> 
 
    <div class="caption text-center"><p>Kevin Mitnick talking in the popular YouTube channel "Big Think".</p></div> 
 
      </div> 
 
</div> 
 
</div> 
 
</div> 
 
</div>

출처

2017-02-15 15:41:25 MKAD

너비와 높이를 알고 있습니다. 부트 스트랩을 사용하고 있기 때문에 나는 자동으로 클래스 나 다른 것으로 크기를 조정할 이미지였습니다. –

부트 스트랩이 효과를 적용하는 클래스를 갖는다 : img-responsive. 이는 max-width: 100%;, height: auto; 및 display: block;을 이미지에 적용하여 부모 요소에 맞게 확장됩니다.

곧 출시 될 부트 스트랩 4 버전에서이 클래스는 img-fluid으로 변경되었습니다.

<img src="..." class="img-responsive" alt="Responsive image">

더 많은 정보는 Bootstrap's site과 Bootstrap 4 Alpha page에서 찾을 수 있습니다.

출처

2017-02-15 15:48:12 Marcelo

.img-responsive는 나에게 아무런 변화가 없습니다. 이미지는 여전히 거대하고 넘쳐 흐르고 있습니다. –

웹 사이트를 만들 때이 웹 사이트를 사용하고 있습니다. https://codepen.io/georgekech/pen/Lxqrvb 부트 스트랩을 활성화했습니다. 나는 왜 그것이 자동으로 그것을하지 않는지 모르겠다. –

@GeorgeKech Bootsrap 4의 알파 버전을 사용하고 있습니다.이 버전에서 클래스는 'img-fluid'라고합니다. – Marcelo

올바르게 이해하면 이미지가 상위 요소 외부로 넘치지 않게하고 싶습니까? 이 경우 overflow: hidden;을 추가하거나 응답 성이 뛰어나고 확장 가능한 이미지의 경우 img-responsive 클래스를 이미지 태그에 사용할 수 있습니다.

출처

2017-02-15 20:15:06 Dotol

부트 스트랩에서 이미지가 오버플로되는 것을 어떻게 막을 수 있습니까?

답변

관련 문제