反应式

Question

我对造型很陌生，如果这太基本的话，很抱歉。

在我的React应用程序中，我试图从文件中导入一个图像，如下所示：

import cup from './img/cup.png'

并将其与文本和<div>中包含的其他内容一起样式如下：

<div style={{display:'inline-block', 
             textDecoration:'underline', 
             cursor:'pointer'}}>
  <img src={cup} alt=''/>
  <h1 className="title is-4">"Item"</h1>
</div>

但效果很差。图像显示太大了。

我想将图像直接引用到style中，并在其中管理“高度”和“宽度”(或“大小”)，但还没有找到一种方法。

这个是可能的吗？怎么会这样？

Answer 1

如果你想要垂直的话，试试这个。

       <div>
          <div style={{ display: "inline-block",
              textDecoration: "underline",cursor: "pointer"}}>
            <img
              style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/intro-video-poster@2x.jpg"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

如果你想要水平的

      <div>
          <div style={{ display: "flex", textDecoration: "underline", cursor: "pointer"}}>
            <img style={{ height: 100 }} src={
                "https://www.belightsoft.com/products/imagetricks/img/intro-video-poster@2x.jpg"
              } alt=""
            />
            <h1 className="title is-4">"Item"</h1>
          </div>
        </div>

Answer 2

只需将高度和宽度大小添加到图像中，如下所示

  <img src={cup} alt='' height={50} width={50} />

此外，您还可以将自动添加到并将大小设置为另一个--它将最有效地工作。

  <img src={cup} alt='' height={50} width='auto' />

  <img src={cup} alt='' height='auto' width={50} />

Answer 3

基本上，你的第一步就是学习选择器是什么。简而言之，将样式与HTML标记(或dom，诸如此类)链接是一种命名约定。例如，假设您将一个类放到图像中。

<div>
  <img src={cup} alt='' className="my-image"/>
  <h1 className="title is-4">"Item"</h1>
</div>

和一个CSS文件，您必须将它作为源文件头处组件的依赖项导入到导入杯旁边的‘./img/cu.png’。

style.css

img.my-image {
  // css rules here
}

然后发生魔术，CSS规则，例如，写入文件中的绝对/相对宽度/高度将相应地应用于图像。