是否有根据预定像素宽度自动调整图像大小的代码？答案

【问题标题】：is there code to automatically resize an image based on predetermined pixel width?是否有根据预定像素宽度自动调整图像大小的代码？
【发布时间】：2016-08-12 00:59:44
【问题描述】：

我一直在为我的商店开发我的网站，并且有多个页面，其中的产品排列在一个表格中。第一列是商品的照片，然后是商品编号、描述、价格等列。目前我正在为每个图像编写代码调整大小“img 高度：，img 宽度：”是否有代码会自动为每个图像执行此操作图片？我试图保持所有照片的宽度相同以保持列相同，但每张照片的高度通常不同。我只是想让它们保持比例。只是想找出一种更容易做到这一点的方法。我尝试了许多设计您的站点的网站，但没有一个提供子页面的子页面。网站是 www.fredstrainshop.com。 “lionel.html”链接是我正在尝试做的一个很好的例子。感谢您的帮助。

【问题讨论】：

这种风格不应该有效吗？ img{ width: 100%; height: auto;}工作？

标签： html image

【解决方案1】：

您可以为每个图像创建一个类并指定宽度和高度。如果您想更改某些特定元素的高度，请使用 id。

HTML-

 <body>
        <img class="train" src="http://www.fredstrainshop.com/6-39534.jpg">
        <img class="train" src="http://www.fredstrainshop.com/6-39563.jpg">
    </body>

CSS-

 .train
   {
      border: 1px solid black;
      width: 100px;
   }

请参阅此以获得灵感 - https://jsfiddle.net/0w0vkzst/

另外，我刚刚访问了您的网站，请考虑使用类和 ID 来实现更加模块化的设计。您可能想刷一下您的 html 技能，因为 codecademy 和 w3schools 是很棒的网站。

【讨论】：

【解决方案2】：

我使用了这个 html 行

style="width:100%;height:100%;"

该行在我的情况下不起作用，因为滚动窗格的工作方式略有不同。但是如果我添加这一行：

<img src="images/album/thumbs/1.jpg" alt="images/album/1.jpg" style="width:100%;height:100%;"/>

有效

【讨论】：