Как остановить изображение от переполнения в бутстрапе?

-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:

body { 
    margin-top: 60px; 
}

источник

2017-02-15 George Kech

попробуйте добавить максимальную ширину/высоту к вашему изображению – Pete

вы должны изменить размер изображения или добавить ширину и высоту стилей в фотошопе Tag.

<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

Я знаю о ширине и высоте. Поскольку я использую bootstrap, я был образом, чтобы автоматически изменить размер с классом или чем-то еще. –

Bootstrap имеет класс, который применяет этот эффект: img-responsive. Это относится к изображениям max-width: 100%;, height: auto; и display: block;, чтобы он хорошо масштабировался с родительским элементом.

В следующей версии Bootstrap 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-отзыв не делает ничего для меня. Изображение по-прежнему огромно и переполнено. –

Я использую этот сайт для создания веб-страницы: https://codepen.io/georgekech/pen/Lxqrvb У меня включен bootstrap. Я не знаю, почему он не делает это автоматически. –

@GeorgeKech Я вижу проблему, вы используете альфа-версию Bootsrap 4. В этой версии класс называется 'img-fluid'. – Marcelo

Если я правильно понял это, вы не хотите, чтобы изображение переполнялось за пределы его родительского элемента? В этом случае вы можете добавить overflow: hidden; или для чувствительного и масштабируемого изображения используйте тег изображения img-responsive.

источник

2017-02-15 20:15:06 Dotol

Как остановить изображение от переполнения в бутстрапе?

ответ

Смежные вопросы