Html 在渐进式web应用程序中使用水平滚动条显示图像

我试图显示服装类别的图像。所以我有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)

view-all.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 %}

{%extends“cms/base.html”%}
{%block title%}
查看所有
{%endblock%}
{%block main%}
*{框大小：边框框；}
.wrapper{
溢出-x：滚动；
空白：nowrap；
}
.集装箱{
背景：#ccc；
位置：相对位置；
身高：50%；
宽度：75%；
最大宽度：75%；
显示：内联块；
}
img{
填充：0；
显示：块；
边距：0自动0；
身高：20%；
宽度：75%；
左边距：自动；
右边距：自动；
最大高度：50%；
最大宽度：100%；
}
.覆盖{
位置：绝对位置；
底部：0；
背景：rgb（0,0,0）；
背景：rgba（0,0,0,0.5）；
颜色：#f1f1；
宽度：75%；
过渡：放松；
不透明度：0；
颜色：白色；
字体大小：20px；
填充：20px；
文本对齐：居中；
}
.container:悬停。覆盖{
不透明度：1；
}
{categories%%中的类别为%s}

{{category.name}
{%用于图像中的图像%}
{%ifequal image.category%}
类别：{{image.Category}}

制造商：{{image.Manufacturer}}

位置：{{image.manufacturer.Location}}

成本价：{{image.Cost\u price}}

销售价格：{{image.salling_price}}



{%endifequal%}
{%endfor%}
{%endfor%}
{%endblock%}

但问题是

图像不保留其原始尺寸比。如何保持原始尺寸比

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

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

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

尝试添加

最大宽度：100%并确保没有为其指定明确的高度或最大高度

如果没有看到代码的运行，这是很难回答的。发生这种情况的原因有很多，但从您提供的标记来看，原因还不清楚

这是否意味着屏幕右侧有空白？如果是这样，请尝试在Dev工具中从DOM中删除部分，直到问题解决为止，以帮助您缩小isue的范围

---

为什么没有人回答？这是一个很长的问题还是一个大家都忽视的难题？！两个人。我应该分享一些其他的东西来让它更清楚吗？我不这么认为，或者至少不是我能想到的。问题是，我们无法确切地看到项目是如何呈现的，这将是问题的一部分。也许为了消除一些因素，可以试试这个；将

.container:hover.overlay

更改为

.container:hover>.overlay

。不太可能改变任何东西，但我有一个奇怪的想法。同时尝试添加

display:none至
。叠加
和
显示：块到悬停状态。添加>帮助。非常感谢。关于如何使悬停框的大小适应图像的大小，有什么想法吗？现在悬停框对于小尺寸的图像来说是大的。是在桌面上还是在手机上？容器当前为75%宽度，您必须删除容器上设置的所有宽度，它将适应图像的大小。尽管您可能必须使其成为
内联块
。