在 HTML 中对齐（和裁剪）图像，使其不重叠答案

【问题标题】：Aligning (and cropping) images in HTML so they don't overlap在 HTML 中对齐（和裁剪）图像，使其不重叠
【发布时间】：2016-01-15 16:09:57
【问题描述】：

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

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

但是，在某些图像比其他图像长的情况下，我会得到这样的重叠效果：

我想要的是让他们都像这样显示：

我该怎么做？

【问题讨论】：

【解决方案1】：

Drupal 默认提供裁剪/缩放图像的功能。提供更大的图像并缩小它们或使用 CSS 裁剪它们是没有意义的。这是对资源（带宽）的浪费。

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

那么你应该开始使用这种风格。如果您的页面是通过查看查找并编辑该视图生成的。找到该图像字段并将其设置为使用您的新样式。

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

第一个参数是样式名称，所以输入你刚刚创建的样式名称。其他参数是 URI（不是路径，如该页面所述！）。打印出 (print_r 或 var_dump 模板文件中的整个图像对象，看看如何访问图像 URI。它应该类似于：

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

所以将它作为第二个参数传递。

【讨论】：

好的，谢谢，我没想到要定义新的图像样式。我已经这样做了，并且解决了图像大小问题，但现在我无法让图像与文本左对齐。在我的原始帖子中，我使用图像 URL 并重写视图中字段的输出以实现“向左浮动”效果。现在我正在使用一个排除字段来显示裁剪的图像并用
[field_image]
重写它，但 Drupal 忽略了样式声明，因此图像只是单独出现在一行上，文本直接出现在下面。
您可以更改/创建模板文件吗？如果是这样，那么您可以放置您喜欢的确切 html 并在图像路径中动态打印。在 firebug 或一些类似的检查器工具中检查应用了哪些 CSS。由于您正在编写内联 CSS，因此它应该具有最高优先级。如果你真的别无选择，你可以使用“重要”限定符，但是，因为它是 inlice css...我怀疑其他一些 CSS 覆盖了你的。
不，很遗憾，我无法访问 CSS 或模板文件 :(

【解决方案2】：

即使您无法访问 CSS，您仍然可以通过在 HTML 标记中添加 style 来使用 CSS。

至于您的重叠问题，假设您有一个包含图像的div，可以将div 的style 设置为style="overflow:hidden"。您也可以为包含您的图像的div 留出足够的空间。

【讨论】：