Javascript 在“评论”部分，图像比其容器大

通常，在博客网站中，用户可以使用文本或图像等进行评论，在我的情况下，当用户使用尺寸大于容器的图像进行评论时，视图会受到以下影响：

事实上，我正在Firebase存储中存储图像，我无法控制这些图像。 这是本页的代码 Article.js：

import React from 'react';
import './Articles.css' ;
import {Link } from 'react-router-dom';
import ImageUploader from 'react-images-upload';
import { Editor } from '@tinymce/tinymce-react';
import {storage} from '../firebase/firebase';
class Articles extends React.Component{

constructor(props){
  super(props);
  this.state={
    title:this.props.location.title,
    comment:'',
    postid:this.props.location.postid,
    arraycomments:this.props.location.arraycomments,
    postcontent:this.props.location.postcontent,
    image:null,
    url:'',
    progress:0
  }
 this.handleChange = this.handleChange.bind(this)
 this.handleChange = this.handleChange.bind(this)
}

onchangecomment=(event)=>{
this.setState({comment:event.target.value});
console.log(this.state.comment)
}

handleChange(event) {
if(event.target.files[0]){
  const image=event.target.files[0];
  this.setState(()=>({image}));
  console.log(this.state.image)

}
}

  handleUpload=()=>{

    const {image}=this.state;
    const uploadTask=storage.ref(`images/${image.name}`).put(image);
      if(image){
      document.getElementById('progress').style.display="block";
      }
    uploadTask.on('state_changed',
      (snapshot)=>{
       const progress=Math.round((snapshot.bytesTransferred/snapshot.totalBytes)*100);
       this.setState({progress})
      }
      ,(error)=>{
       console.log(error)
      },
      ()=>{
       storage.ref('images').child(image.name).getDownloadURL().then(url=>{
        this.setState({url})
        document.getElementById('txtarea').value +=`<img src=${this.state.url} alt='image'/>`;
        document.getElementById('placehoder').style.display="block";
        document.getElementById('progress').style.display="none";


       })
      })
  }


addcomment=()=>{
  fetch('http://localhost:3002/Addcomment',{
    method:'post',
    headers:{'Content-Type':'application/json'},
    body:JSON.stringify({
    comment:this.state.comment,
    postid:this.state.postid
    })
  }).then(resposne=>{})
  .catch(err=>{console.log('not added from the quesiotns')})
   document.getElementById('txtarea').value='';
}

render()
{
const {postcontent}=this.state;

return(


<div className='article'>
<div dangerouslySetInnerHTML={{ __html:postcontent }} />
<h4>Discussion</h4>
<div className='submitcommentform'>


<textarea id='txtarea' placeholder='Add discussion'  
onChange={this.onchangecomment} 
style={{height:'127px', width:'687px',padding:'6px 6px'}}>
</textarea>
<div className='submit-wrapper-actions'>
<Link to='' ><img className='wrapperimgage' src='https://practicaldev-herokuapp-com.freetls.fastly.net/assets/info-b2ce6a88ddd367e1416cd4c05aab2edee2d0b2c355d7b2aae1821eec48014e11.svg' height='21px'/></Link>
<label for="choosefile" class="btnimage">Select Image</label>
<input id='choosefile'type='file'  onChange={this.handleChange} style={{visibility:'hidden'}} />
<button id='btnuplod' onClick={this.handleUpload}>Upload Image</button>
<button id='btnsubmit'onClick={this.addcomment}>Submit</button>
</div>
<div className='placeh-progr'>
 <img id='placehoder' alt='uploaded image' src={this.state.url || "https://via.placeholder.com/150"} width='150px' height='150px'
style={{display:'none'}}
 />
  <progress id='progress' value={this.state.progress} max="100" style={{display:'none'}} />

 </div>




</div>

<div>
{
 this.state.arraycomments.map((post,i)=>{
  return (
   <div className='commentsection' key={i} dangerouslySetInnerHTML={{ __html:post.comm_content }} />
      );
 })
}
</div>
</div>

  );

}

}

export default Articles;

---

我的问题：有没有办法使图像比容器小。

为什么不使用CSS呢

.your-image-class,
.container-class img {
    max-width: 100%;
}

为图像放置一个类，或者为容器类中的图像全局执行该操作