Question

我有一个React组件：

import React from 'react';
import '../css/SomePic.css';

class SomePic extends React.Component {
  render() {
    return(
      <div><img id="helloworld" alt="hello world"></img></div>
    )
  } 
}

export default SomePic;

以下是它的基本CSS：

#helloworld {
  content: url('../images/somepic.jpg'); //this is working
  width: 100px;  //this is NOT working
  height: 100px; //this is NOT working
}

为什么CSS不能改变img标签的宽度和高度？内容：url（）代码在显示图像时起作用，但它显示为默认的宽度和高度，而不是我想要的100x100宽度和高度。

Answer 1

这是因为没有从其<img>属性加载内容的src标记应显示其alt属性，并且大多数浏览器选择将此标记设置为默认display属性在这种情况下inline。

当您使用CSS content属性显示图片时，<img>标记仍处于 alt-fallback模式中，因此仍会显示内联

要修复它，有两个解决方案：

请勿在{{1}}和content伪元素之外的任何地方使用此::after属性，并直接设置::before的src。（+将适用于所有浏览器）

<img>

img{
  width: 100px;
  height: 100px;
  border: 1px solid green;
}

强制<img src="https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg" alt="a mermaid"> <img src="" alt="an img tag in alt fallback mode (inline)">属性为display。（但请记住，inline-block无处不在）

content

img {
  width: 100px;
  height: 100px;
  border: 1px solid green;
  display: inline-block;
  overflow: auto;
}

#css {
  content: url('https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg');
}

Answer 2

尝试在CSS中使用类选择器。例如，您当前正在使用ID，为什么不尝试：

<img className="hello-world"/>

并相应地更改CSS！

为什么Reactjs中<img/>的高度/宽度不变？

2 个答案: