输入类别正确显示，按钮类别不正确

Question

我正在处理一个按钮，它是重新缩放的图像。当我使用<input>时，CSS可以正确应用，但是当我在<button>中使用相同的CSS时，则不能正确使用CSS。

输入标签：

<input type="image" name="app_ref" value="{$value['id']}" class="resize-app" src="{$value['img']}" alt="{$value['title']}">

但是，POST会返回单击图像位置的坐标，而不是我要的值。

按钮标签：

<button type='submit' name='app_ref' value='{$value['id']}' class='resize-app'><img src='{$value['img']}'></button>

按预期工作，除了不再显示调整大小的图像，而是显示原始尺寸的图像。

我猜您需要为按钮样式制作一个单独的类？尽管我试图避免使用内联脚本，但是如果需要将URL添加到样式表中，则无法将{$ value ['img']}移动到CSS文件中。图像以base64格式存储。

.resize-app {
  height: 270px;
  width: 270px;
  border-radius: 48px;
  border: 4px solid #000;
  border-color: rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

Answer 1

您的CSS仅定位到button元素。要限制图像的宽度，您需要遵循以下几条原则：

.resize-app {
  height: 270px;
  width: 270px;
  border-radius: 48px;
  border: 4px solid #000;
  border-color: rgba(0, 0, 0, 0.05);
  margin-top: 20px;
}

.resize-app img {
  max-width: 100%;
}

<button type='submit' name='app_ref' value='{$value[' id ']}' class='resize-app'>
  <img src='https://placehold.it/500x500'>
</button>