在渐进式 Web 应用程序中显示带有水平滚动条的图像

Question

我正在尝试明智地显示服装类别的图像。所以我有 kurtis、牛仔裤、纱丽和上衣的服装。因此，这些类别必须一个接一个地垂直显示，而属于各个类别的图像必须使用滚动条水平显示。悬停时的每个图像都应显示其属性。所有这些都发生在带有 Django 后端和 HTML、CSS 界面的渐进式 Web 应用程序中。

views.py

@login_required
def viewall(request):
    context = RequestContext(request)
    categories = Category.objects.all()
    images = Images.objects.all().order_by('-id')
    return render_to_response('cms/view-all.html',{'images':images,'media_url':settings.MEDIA_URL,'categories':categories,},context)

查看所有.html

{% extends "cms/base.html" %}

{% block title %}
    View-all
{% endblock %}

{% block main %}
<style>
*{box-sizing: border-box;}

.wrapper{ 
    overflow-x:scroll;     
    white-space: nowrap;
}
.container {
    background: #ccc;
    position: relative;
    height: 50%;
    width: 75%;
    max-width: 75%;
    display: inline-block;
}
img {
    padding: 0;
    display: block;
    margin: 0 auto auto 0;
    height: 20%;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    max-height: 50%;
    max-width: 100%;
   }
.overlay {
    position: absolute; 
    bottom: 0; 
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.5);
    color: #f1f1f1; 
    width: 75%;
    transition: .5s ease;
    opacity:0;
    color: white;
    font-size: 20px;
    padding: 20px;
    text-align: center;
   }
.container:hover .overlay {
    opacity: 1;
}
</style>
{% for category in categories %}
<br /><h3>{{ category.name }}</h3> 
<div class="wrapper">   
    <div id="slider4" class="text-center">
        {%  for image in images %}
        {% ifequal image.category category %}
        <div class="container">
            <img src="{{ image.file.url }}">
            <div class="overlay">Category: {{ image.category }}<br />
                                 Manufacturer: {{ image.manufacturer }}<br />
                                 Location: {{ image.manufacturer.location }}<br />
                                 Cost price: {{ image.cost_price }}<br />
                                 Sales price: {{ image.selling_price }}<br />
            </div>
            <br />
        </div>
        {% endifequal %}
        {% endfor %}  
    </div>
</div>
{% endfor %}
{% endblock %}

但问题是

1. 图像未保留其原始尺寸比。如何保持原来的尺寸比例？

2. 将鼠标悬停在一张图像上会显示所有图像的属性。为什么会这样？

3. 在手机上查看时，页面不适合设备宽度。

这可能是简单的 CSS 错误，但我是 CSS 的新手。请帮忙。

Answer 1

1. 尝试将max-width: 100%; 添加到图像中，并确保它们没有被指定明确的高度或最大高度。

2. 如果没有看到实际的代码，这很难回答。发生这种情况的原因有一百万零一个，但从您提供的标记中不清楚原因。

3. 是说屏幕右侧有空白吗？如果是这样，请尝试在开发工具中从 DOM 中删除部分，直到问题消失，以帮助您缩小问题所在。