我应该如何设置这个img元素的样式才能达到我想要的效果

Posted 2023-02-22

【中文标题】我应该如何设置这个img元素的样式才能达到我想要的效果

【英文标题】：How should I style this img element to achieve the effect I want

【发布时间】：2019-12-18 17:59:06

【问题描述】：

https://codesandbox.io/s/relaxed-margulis-rr9zo

伙计们，这是我到目前为止的代码。假装镀铬标志是一个人的照片。

我需要将照片与名称和副标题并排放置。当您缩小浏览器时，徽标将更接近文本，并且徽标将位于文本下方。我用了styled-component，我为标志写的风格是

const ImgCotainer = styled.img`
  position: relative;
  top: -300px;
  z-index: -1;
`;

然而，我目前所取得的成就有两个主要问题。

首先，我不太擅长 CSS。我无法很好地定位徽标（正如您在演示中看到的那样）

其次，我将z-index: -1; 设置为使其位于文本下方。但奇怪的是，发生这种重叠大约需要 1 秒。当你看到演示时，你就会明白我的意思。

我知道我的问题对于有丰富 css 经验的人来说可能是微不足道的，但我非常感谢任何帮助。

最后，我想要实现的外观是这样的。我觉得这张照片更有可能是独立的img，而不是整个事物的背景图像。我试图找到这样的网站的源代码，并了解他们是如何做到的以及与之相关的动画，但我就是找不到。

【问题讨论】：

我会做 2 件事： 1. 将图像放在一个带有名称和副标题的 div 中，这样它们就会被定位在一起。 2. 创建一个媒体查询，它将隐藏图像并根据屏幕宽度显示背景图像。

@Rom 您好，感谢您的及时回复。是的，它们在同一个容器中（<TransitionGroup>），即使它不完全是div。

请将与问题相关的所有代码包含在问题本身中，请参阅minimal reproducible example

【参考方案1】：

解决方案 1：

您可以设置图像的宽度以根据视口宽度进行更改，还可以为更大的屏幕设置所需的图像最大宽度。

将显示设置为块状，将左右边距设置为自动以水平居中显示图像。

const ImgCotainer = styled.img`
  position: relative;
  top: -300px;
  z-index: -1;
  width: 50vw;
  max-width: 400px;
  display: block;
  margin: 0 auto;
`;

这是您可以使用的示例图片。

const img = () => (
    <div style= transitionDelay: "600ms">
      <ImgCotainer src="https://pngimg.com/uploads/doctor/doctor_PNG16036.png" />
    </div>
);

解决方案 2：

为图像容器的父元素设置定位和 z-index 将解决图像在文本前面动画然后在几秒钟后在文本下动画的问题。

const img = () => (
    <div style= 
      transitionDelay: "600ms",
      position: "absolute",
      bottom: 0,
      display: "flex",
      zIndex: -1,
      justifyContent: "center" 
    >
      <ImgCotainer src="https://pngimg.com/uploads/doctor/doctor_PNG16036.png" />
    </div>
 );

在这种情况下，您的图像容器可以非常简单。

const ImgCotainer = styled.img`
   width: 80vw;
   max-width:  700px;
`;

检查以下实现：

Sandbox

Demo

【讨论】：

您好，感谢您的详细解决方案！对此，我真的非常感激！我确实有两个问题想问： 1. 我尝试使用电话设备选项查看您的演示，它位于文本下方，非常棒，但是有一些空白（或空白内容）占据了空间在屏幕右侧，这意味着您可以尝试将屏幕向左移动，您会看到右侧有一个空白区域。我想让页面总是完全适合屏幕的宽度，这样你就不能水平移动屏幕。如何修改代码来解决这个问题？

您能否向我解释一下为什么在我的原始演示中，徽标在 几秒钟后出现在文本下方，这对我来说真的很奇怪。

在您的原始演示中，标志在几秒钟（3 秒）后进入文本下方是因为在您的 CSSTransition 循环中，您在父 div 元素（img 变量）上应用了“淡入淡出”过渡，没有定义它的位置和z-index。另一方面，为子“ImgCotainer”组件定义位置和 z-index 从来没有意义，因为没有直接应用 css 转换。子容器的 z-index 在 3000ms 超时 的整个动画序列完成后生效，直到那时 React CSS Transistion 将控制您的子元素。

我无法使用浏览器上的电话设备选项复制空白空间，如果您能帮助我完成复制它的步骤，那将有所帮助。此外，在您的布局组件中，此链接 children 的末尾还有一个额外的 )，它呈现在您的最终 html 输出也是如此。

【参考方案2】：

您可以使用flexbox 来实现它。

1- 用样式化的组件包装你的整个元素（6 个元素 1 到 5 + img），我们将其命名为 Flex。

2- 你的前 5 个元素应该被包裹在一个 div 中，这样 5 个元素本身将垂直显示，但整个 div 将与 img div 水平对齐。

3- 用其他 div 包装您的图像

现在它们将彼此水平对齐。对于移动设备，你应该在Flex组件中添加媒体查询来改变方向：

您的Flex 组件将类似于：

const Flex = styled.div`
  display: flex;
  align-items: center; // To align the image in the center with the text.
  div:nth-child(1) 
    margin: 20px; // to have some spaces between the text and the image
  
  @media (max-width: 768px) 
    flex-direction: column;
  
`;

Working Demo

【讨论】：

嗨。谢谢您的回答！它工作得很好，但文本的淡入动画不知何故消失了