html - 在渐进式 Web 应用程序中使用水平滚动条显示图像

Question

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

View .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%; 并确保没有为它们指定明确的高度或 max-height。

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

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