CSS: Отзывчивый веб-дизайн

Question

Я использую Materialise CSS и AngularJS для создания страницы каталога товаров.У меня проблемы с пейзажами.Снимки экрана и код приведены ниже.

HTML:

<div class="row">
    <div class="col s12 m10 l10">
        <div ng-repeat="info in products">
            <div class="col s6 m3 l3" id="no-padding">
                <div class="card" id="no-margin">
                    <div class="card-image">
                        <div id="image-container">
                            <img id="image" ng-src="{{ info.icon }}" ng-style="{'height': '200px'}" class="responsive-img">
                        </div>
                    </div>
                </div>
             </div>
        </div>
    </div>
</div>

CSS:

#image-container {
    overflow: hidden;
}
#image {
    margin: auto;
    width: auto;
    padding: 10px;
}
@media only screen and (max-width: 480px) {
    #no-margin {margin: 0 !important;}
    #no-padding {padding: 0 !important;}
}

Размер изображения товара справа: 832 x 477 (пейзаж).Размер изображения товара слева: 552 x 832 (портрет).Изображение продукта справа кажется вертикально вытянутым.Скажите пожалуйста, почему это происходит и как это исправить.Помощь очень ценится.Спасибо.

Answer 1

Установите для вашей ширины img значение 100% и для его высоты значение auto.

Также установите вертикальное выравнивание по центру, чтобы сохранить изображение по центру.

Примечание: угловой JS - очень плохое движениедля магазина электронной коммерции.Я бы серьезно пересмотрел это.Достаточно того, что вы взорвали CSS-фреймворк, разрушив соотношение текста и кода, но вы можете забыть индексировать с помощью angular.

Answer 2

Вы задаете для изображения установленную встроенную высоту, поэтому оно не сможет масштабироваться должным образом, поскольку оно всегда сохраняет одинаковую высоту (меняется только ширина).

Попробуйте использовать высотуавто.Это, наряду с установкой ширины 100%, сделает ее масштабированной с шириной контейнера, и высота изменится соответственно.

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

Это должно помочь вам.