Bootstrap 3 - некоторые изображения изменяются, другие не

Я использую Bootstrap 3 и, как вы видите в коде, у меня есть два изображения. У обоих из них есть класс «.img-отзывчивый», поэтому я не знаю, почему только первый изменяет размер, а второй - того же размера.Bootstrap 3 - некоторые изображения изменяются, другие не

HTML:

<div class="container-fluid"> 
    <img src="img/ea.png" class="img-responsive" id="img-center" width="700" height="229"> 
</div> 

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-lg-12 frase"> 
      <p>LOREM IPSUM</p> 
     </div> 
    </div> 
</div> 

<div class="container-fluid"> 
    <a href="#"> 
     <img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;" width="80px" height="65px"> 
    </a> 
</div>

В случае, если вам интересно, то идентификатор "IMG-центр" имеет только "маржа: 0 авто" и «Нижнее: 45vh;

источник

2015-07-25 user3375665

2-е изображение имеет встроенный стиль, который будет переопределять стили, отвечающие за загрузку. Вы можете использовать дополнительный класс для этого изображения и использовать '! Important' для переопределения встроенного стиля. Или, если возможно, удалите встроенные стили. – nstungcom

Это потому что вы используете другие инлайн-стиль width и height в обеих из них, так что попытайтесь удалить встроенный стиль, потому что это предотвратить класс img-responsive применимые.

Первого IMG:

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23 
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" id="img-center">

Второго IMG:

<img src="http://img.freepik.com/free-photo/background-with-white-squares-free-vector_23 
-2147501484.jpg?size=338c&ext=jpg" class="img-responsive" style="margin:0 auto;" >

Надеется, что это поможет. Посмотрите на Working Fiddle.

источник

2015-07-25 22:44:54

Если вы примените атрибуты width и height к элементу, он переопределит width: 100% значение .img-responsive.

Однако причина, по которой первое изображение является отзывчивым, а второе - нет, вы не добавляли px в конец размеров для первого изображения. Браузер не знал, как это интерпретировать, поэтому он вернется к исходной настройке width: 100%;.

<img ... class="img-responsive" ... width="700" height="229"> 
<img ... class="img-responsive" ... width="80px" height="65px">

Чтобы сделать оба изображения чувствительными, необходимо удалить фиксированные атрибуты размера.

<img src="img/ea.png" class="img-responsive" id="img-center"> 
<img src="img/arrow.PNG" class="img-responsive" style="margin:0 auto;">

источник

2015-07-25 23:35:04

Bootstrap 3 - некоторые изображения изменяются, другие не

ответ

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