Як створити чуйний образ, який також масштабується в Bootstrap 3

В даний час я використовую завантажувальний трейтер 3, і я зіткнувся з проблемою, щоб створити чуйне зображення. Я використовував img-responsiveклас. Але розмір зображення не збільшується. Якщо я використовую width:100%замість max-width:100%цього, він працює чудово. Де проблема? Це мій код:

    <div class="col-md-4 col-sm-4 col-xs-12 ">
        <div class="product">               
                <div class="product-img ">
                   <img class="img-responsive" src="img/show1.png" alt="" />
                </div>
             </div>
     </div>

Клас чуйних зображень Bootstrap встановлює max-width100%. Це обмежує його розмір, але не змушує його розтягуватися, щоб заповнити батьківські елементи, більші, ніж саме зображення. Вам потрібно буде використовувати widthатрибут для примусового збільшення масштабу.

http://getbootstrap.com/css/#images-відповідає

Впевнені речі!

.img-responsive це правильний спосіб зробити зображення чуйними за допомогою завантажувального пристрою 3 Ви можете додати якесь правило висоти для зображення, яке ви хочете зробити чуйним, тому що з відповідальністю ширина змінюється по висоті, зафіксуйте його і ви там.

Не впевнений, чи все-таки це допомагає ... але мені довелося зробити невеликий трюк, щоб зробити зображення більшим, але зберегти його чуйним

@media screen and (max-width: 368px) {
    img.smallResolution{
        min-height: 150px;
    }

}

Сподіваюся, що це допомагає PS Максимальна ширина може бути будь-чим, що вам подобається

Якщо встановити фіксовану ширину на зображення не є варіантом, ось альтернативне рішення.

Маючи батьківський поділ із відображенням: таблиця та таблиця-макет: виправлено. Потім встановіть зображення для відображення: комірка таблиці та максимальна ширина до 100%. Таким чином зображення підійде до ширини його батьківського.

Приклад:

<style>
    .wrapper { float: left; clear: left; display: table; table-layout: fixed; }
    img.img-responsive { display: table-cell; max-width: 100%; }
</style>
<div class="wrapper col-md-3">
    <img class="img-responsive" src="https://www.google.co.uk/images/srpr/logo11w.png"/>
</div>

Fiddle: http://jsfiddle.net/5y62c4af/

Спробуйте наступне в таблиці стилів CSS:

.img-responsive{
  max-width: 100%;
  height: auto;
}

Спробуйте це зробити:

1) У вашому index.html

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
  <a class="thumbnail" href="#">
    <div class="ratio" style="background-image:url('../Images/img1.jpg')"></div>
  </a>
</div>

2) У вашому style.css

.ratio {
  position:relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%; 
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;  
}

Я виявив, що ви можете розмістити клас .col на зображенні, це зробить трюк - однак це дає йому додаткове заповнення разом з будь-якими іншими атрибутами, пов'язаними з класом, такими як float left, однак їх можна скасувати, скажімо, наприклад, відсутність заповнення клас як доповнення.

Я думаю, що зображення більш ніж зіпсоване. Приклад: розмір зображення - 195px X 146px.

Він буде працювати всередині нижчих роздільних можливостей, як планшети. Якщо у вас є роздільна здатність 1280 X 800, вона буде сильнішою, оскільки ширина також на 100%. Можливо, CSS всередині медіа-запиту, як шрифти піктограм, є найкращим рішенням.