css:响应式网页设计

Question

我正在使用 Materialize 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(纵向)。右侧的产品图片似乎被垂直拉伸(stretch)了。请告诉我为什么会发生这种情况以及如何解决它。非常感谢您的帮助。谢谢。

Answer 1

将您的 img 宽度设置为 100% 并将其高度设置为自动。

同时将垂直对齐设置为居中以保持图像居中。

旁注:Angular JS 对于电子商务商店来说是一个非常糟糕的举措。我会认真地重新考虑它。破坏文本与代码比率的 css 框架已经够糟糕了，但您可以忘记使用 angular 进行索引。