Html 拉伸图像输入，然后适配到其容器'；s宽度

需要将多个图像拉伸，反之亦然，压缩成一个大小，比如175×250像素

它是这样工作的

<input type = "image" src = "@ Url.Content (topRated.Value)" onclick = "this.form.submit" class = "resize" width = "175" height = "250">

img.resize {
    width: 175 pixels;
    height: 250 pixels;
}

---

问题是如何让它协同工作？我希望图像首先拉伸到175x250宽高比，然后整齐地调整到父元素，就像img fluid所做的那样。根据标记约束，这里有一种可能可行。它使用了与Bootstrap相同的零高度/底部填充技术：

.box{
身高：0；
填充底：142.85%；/*250÷175*/
位置：相对位置；
}
.框输入{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
/*仅演示*/
.行{
背景#f8f9fa；
边缘顶部：20px；
}
上校{
边框：实心1px#6c757d；
填充：10px；
}

第2页，共2页
第1页，共3页
三分之三

听起来您对拉伸不感兴趣，而是对保持一致的纵横比感兴趣。对吗？而且，您的第一个CSS选择器不会命中您的输入。它的目标元素类型为

img

@isherwood step one-将所有图像拉伸到相同的纵横比。第二步-从父元素正确调整图像大小我认为在输入时不需要脚本就不会这样做。您需要更多的标记来设置图像元素，绝对定位在容器元素上，或者需要将图像作为背景应用，裁剪以覆盖具有正确外观的元素。

<input type = "image" alt = "Submission form" src = "@ Url.Content (topReaded.Value)" onclick = "this.form.submit" class = "img-fluid" width = "175" height = " 250 ">

.img-fluid {
  maximum width: 100%;
  height: auto;
}