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

Question

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

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 中删除部分，直到问题消失，以帮助您缩小问题所在范围。