Question

我一直在尝试在我的烧瓶应用程序中的某些按钮上添加gif。而且我不知道如何伸展按钮的高度。

这是我的表格：

from flask_wtf import FlaskForm
from wtforms import SubmitField

class AcceptanceForm(FlaskForm):
    refresh_cat_btn = SubmitField('')

和.html：

<html>
    <head>
      <style>
            .cat_btn {
                margin: 0 auto;
                width: 80%;
                background-image: url("../static/cat_button.gif");
                background-size: cover;
                -webkit-background-size: cover;
                -moz-background-size: cover;
                -o-background-size: cover;
                } 
          </style>

    </head>
    <body>

        {% block content %}
            <form action="" method="post" novalidate>
                {{ acceptance_form.refresh_cat_btn(class_ = "cat_btn") }}
            </form>
        {% endblock %}
    </body>
</html>

如您所见，我尝试使用“ cover”属性，但是它不起作用。

在Opera和Firefox中计算：

.cat_btn {
    margin: 0 auto;
    width: 80%;
    background-image: url("../static/cat_button.gif");
    -webkit-background-size: cover;

在两种浏览器中，高度均为21.3702px

我认为这个数字在某种程度上取决于按钮的字体大小（严格来说，SubmitField是输入对象），但是我不知道该怎么办。 ¯_（ツ）_ /¯

Answer 1

与WTForms无关。

.cat_btn {
                margin: 0 auto;
                width: 80%;
                height: 12vw;
                background-image: url("../static/cat_button.gif");
                background-repeat: no-repeat;
                background-size: contain;
                -webkit-background-size: contain;
                -moz-background-size: contain;
                -o-background-size: contain;
                }

这是规范-https://www.w3.org/TR/css3-values/#relative0

输入字段中的背景图片

1 个答案: