Question

我用过

if (index < 0) index--; // change to -- as in your code

但它给我的图像重叠并且太大或太小。

我能做些什么来使所有不同尺寸的图像具有相同的尺寸和形状并且按照一致的顺序？

Answer 1

这个问题比看起来要复杂一些，这是接近它的一种方法。

首先，定义一个div.inner容器来保存图像并指定宽度和高度值（例如100px）。

其次，定义一个div.wrap容器，其中包含div.inner块，然后是h2和p元素。您需要为文本元素提供一些垂直空间，例如，将高度设置为200px到div.wrap。然后，您可以使用float: left创建网格图案。

要使图像缩放到高度或宽度（取决于图像的原始宽高比），请将100％的max-height和max-width应用于图像。

请注意，除非您的图像完全是正方形（内在高度和宽度相同），否则您将在图像的左右边缘（在肖像类型图像的情况下）或在底边（用于风景图像）。

＆＃13;

div.wrap {
  width: 100px;
  height: 200px;
  border: 1px solid blue;
  float: left;
  margin: 10px;
}

div.inner {
  width: 100px;
  height: 100px;
  text-align: center;
}

img {
  max-height: 100%;
  max-width: 100%;
}

h2 {
  font-size: 14px;
  margin: 5px;
}

p {
  font-size: 12px;
  margin: 5px;
}

＆＃13;

<div class="wrap">
  <div class="inner">
    <img src="http://placehold.it/300x300">
  </div>
  <h2>Title Text</h2>
  <p>Some demo text goes here.</p>
</div>
<div class="wrap">
  <div class="inner">
    <img src="http://placehold.it/300x400">
  </div>
  <h2>Title Text</h2>
  <p>Some demo text goes here.</p>
</div>
<div class="wrap">
  <div class="inner">
    <img src="http://placehold.it/400x300">
  </div>
  <h2>Title Text</h2>
  <p>Some demo text goes here.</p>
</div>

＆＃13;

Answer 2

您需要在图片标签上指定宽度和高度。最好的做法是使用css样式，但你可以在标签本身上做这样的......

echo "<img style='width:300px;height:300px;' alt='Missing Picture' src='img/". $r['product_img_name'] . "'>";

如果原始图像不是方形，那么将宽度和高度强制为300px将导致图像被拉伸，这可能看起来不太好。

如何在页面中使不同尺寸的所有图像具有相同的高度和宽度？

2 个答案: