Question

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

Answer 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和w3school是很棒的网站。

Answer 2

我使用了这个html行

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

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

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

它有效

是否有基于预定像素宽度自动调整图像大小的代码？

2 个答案: