css - 如何避免图像扩展我的 html 宽度和高度

Question

我的页面中有一些 position: "absolute" 的 svg 文件，但是每当它们靠近我页面的角落时，它们最终都会扩大我的 Container 元素的宽度（我使用的是 Material UI React），我我尝试在页面容器上使用“maxWidth”：“100vw”，但没有成功，以及prop maxWidth =“lg”和“md”。如果可能的话，我希望 svg 或 img 文件消失在虚无中，而不以任何方式与其外部容器交互https://gyazo.com/9d3d8cf86748ac434700ac0b0ceaf1c6

标签： cssreactjsimagewidth

Answer 1

你有没有考虑过做这样的事情？

.container {
  /* If for some reason the image doesn't fit, hide the overlap */
  overflow: hidden;
}

/* Make image sit within it's container */
img {
  height: auto;
  width: 100%;
}