Question

我有一个使用eccommerce脚本列出产品的网站。除了固定在500px高度的产品图像外，大多数网站似乎都是移动响应式的。我一直在努力使它们具有响应性，但似乎尝试了许多方法，但它们都没有工作。在手机上查看时，图像始终保持相同的大小。

以下是在产品页面上生成每个产品图片的html代码：

<div class="file_image">
	<div class="t"><div class="b"><div class="l"><div class="r"><div class="bl"><div class="br"><div class="tl"><div class="tr">
		{IMAGE}
	</div></div></div></div></div></div></div></div>
<div class="file_links">

以下是.css样式表中控制此div标签的部分：

.file_image
{
float:left;
margin-right:30px;
width:480px;
text-align:center;
}

我需要在某处添加其他内容才能使此图像响应吗？我尝试了几件事，但似乎没有用。如果有人可以帮助我，这将是伟大的。谢谢:)）

Answer 1

尝试添加此内容，

.file_image img
{
  width:100%;
  height: auto;
}

Answer 2

对于这种情况，您应该尝试在max-width而不是width设置图片宽度。

.file_image {
  float: left;
  margin-right: 30px;
  width: auto;
  max-width: 480px;
  text-align: center;
}

希望它可能有所帮助。祝你好运

无法调整图像大小以做出响应

2 个答案: