由于Django中的图像大小,我看不到按钮

dkqlctbz  于 2023-03-24  发布在  Go
关注(0)|答案(1)|浏览(109)

我正在尝试开发一个应用程序来显示一些食物项目在Django中。图片覆盖按钮时,我尝试上传其中一些。我尝试解决方案,但无法修复这个问题。我会很高兴,如果你能帮助我。祝你愉快。

{% extends 'foodApp/base.html' %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
 
    {% block body %}
 
    {% for item in item_list %}
        <div class="row m-5">
            <div class="col-md-3 offset-md-2">
                <img class="card" height="auto" src="{{ item.item_image }}"/>
            </div>
            
            <div class="col-md-2">
                <a href="{% url 'foodApp:detail' item.id %}" class="btn btn-success">Details</a>
            </div>
        </div>
        <div class="row">
            <div class="offset-md-2 col-md-8">
                <hr>
            </div>
        </div>
 
    {% endfor %}
    {% endblock %}    
 
    this is the old code
    
   
    <ul>
        <li>
           
            <a href=""> {{ item.id }} -- {{ item.item_name }}</a>
        </li>
    </ul>
 
       
 
</body>
</html>

这是我的索引源代码。
enter image description here

chhqkbe1

chhqkbe11#

请使用<img class="card">,您应该使用<img class="card-img">

基本.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    {% block head %}
    {% endblock %}
</head>
<body>
    {% block body %}
    {% endblock %}
</body>
</html>

索引.html

{% extends 'foodApp/base.html' %}

{% block head %}
<title>Food Items</title>
{% endblock %}

{% block body %}

{% for item in item_list %}
<div class="row m-5">
    <div class="col-md-3 offset-md-2">
        <img class="card-img" height="auto" src="{{ item.item_image }}"/>
    </div>

    <div class="col-md-2">
        <a href="{% url 'foodApp:detail' item.id %}" class="btn btn-success">Details</a>
    </div>
</div>
<div class="row">
    <div class="offset-md-2 col-md-8">
        <hr>
    </div>
</div>

{% endfor %}

{% endblock %}

相关问题