仅 css 在屏幕尺寸变化时调整图像大小的灵活布局

Question

经过大量研究和反复试验，我谦虚地向各位 CSS 专家寻求帮助。这就是我需要的:

我有两张图片:titlelogo 和 newlogo。

在全屏模式下，newlogo 需要在左边，titlelogo 在右边(这可以与屏幕的整个宽度齐平，也可以“居中”，中间有空格——只要它“看起来不错”即可是标准的公司路线)。

调整屏幕大小时/移动设备，titlelogo 需要在上面，newlogo 需要在下面。两张图片现在都需要居中。

(请不要批评内联 css - 没有办法根据不适用于此场景的其他因素使用它。)

这是我所拥有的，它适合全屏显示，但当屏幕尺寸不同时无法居中:

<div style="text-align:center;">
<img src="https://secure.etransfer.com/images/titlelogo.png" style="float:right;height:auto;width: auto\9;overflow-y:visible;" />
<img src="https://secure.etransfer.com/images/newlogo.jpg" style="float:left;height:auto;width: auto\9;" />
</div>

Answer 1

您可以使用 flex 布局。

In full screen, newlogo needs to be on the left and titlelogo on the right (this can be either flush with the full width of the screen or "centered" with space in between

这可以通过设置容器 div 的样式来完成，如下所示:

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">

justify-content 属性定义 flex 元素如何在 flex 容器的可用宽度内对齐。 space-between 的属性值将通过分配元素之间的剩余宽度 来调整元素。

这将使您的图像分别向左和向右对齐。

When resizing the screen/for mobile, titlelogo needs to be on top and newlogo needs to be beneath it. Both images now need to be centered.

要在没有媒体查询的情况下执行此操作，您需要为图像的左右 margin 添加 auto。像这样:

<img src="..." style="margin: 0 auto;" />

这将使图像在可用宽度内居中。因此，当屏幕宽度太小时(如在移动设备上)，由于容器 div 上的 flex-wrap: wrap 属性，图像将环绕并居中，因为的 margin: 0 auto。

演示 fiddle :http://jsfiddle.net/abhitalks/Lv4omou7/

演示片段:

<div style="display: flex; justify-content: space-between; flex-wrap: wrap;">
  <img src="//placehold.it/128x64/33e" style="margin: 0 auto;" />
  <img src="//placehold.it/128x64/e3e" style="margin: 0 auto;" />
</div>

注意 1:这会产生副作用，即在全屏或更大宽度时图像不会刷新到极左和极右。但是，根据您的问题，这是您可以接受的。

注释 2:内联 CSS 不是一个好的做法。尽量远离它。