在HTML中对齐（和裁剪）图像，以免它们重叠

Question

我正在尝试设置Drupal Views生成的内容列表的样式。 我可以编辑字段的HTML输出，但是无法访问CSS。 内容包括需要向左浮动/对齐以使文本在其周围流动的图像。 原始图像文件有各种大小。 我用于图像字段的HTML是：

<img src="[image url]" width="220" height="auto" align="left" />

但是，在某些情况下图像长于其他图像时，我会得到如下重叠效果：

我想要的是让所有人都这样显示：

我怎样才能做到这一点？

Answer 1

Drupal默认提供裁剪/缩放图像功能。 没有必要提供更大的图像并将其缩小或使用CSS裁剪。 那是浪费资源（带宽）。

转到配置->媒体->图像样式（从管理菜单）并定义所需的样式。 这非常容易-只需命名样式和所需的拾取效果（即“缩放和裁剪”），设置所需的尺寸并保存新样式即可。

然后，您应该开始使用该样式。 如果您的页面是通过视图生成的，请查找并编辑该视图。 找到该图像字段并将其设置为使用新样式。

另一种方法是直接从模板文件强制显示样式中的图像。 查找打印图像的位置并使用：

第一个参数是样式名称，因此请输入刚创建的样式的名称。 其他参数是URI（不是该页面上提到的路径！）。 打印出（在模板文件中具有整个图像对象的print_r或var_dump，并查看如何访问图像URI。它应该类似于：

$node->field_my_image['und'][0]['uri'])

因此，将其作为第二个参数传递。

Answer 2

即使您无权访问CSS，也可以通过在HTML标签中添加style来使用CSS。

对于重叠的问题，假设您有一个包含图像使用的div ，则可以将该div的style为style="overflow:hidden" 。 您也可以为包含图片的div提供足够的空间。