如何避免图像扩展我的 html 宽度和高度答案

【问题标题】：How to avoid images from expanding my html width and height如何避免图像扩展我的 html 宽度和高度
【发布时间】：2021-05-16 17:42:52
【问题描述】：

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

【问题讨论】：

你的图片解释不了太多。你确定它是position: absolute 签入开发工具。如果一个对象是position: absolute，那么它应该从它的父容器中移除并且不会影响容器的大小。
嗨，基本上我有这些箭头和图像溢出我的 html gyazo.com/366277f767e22346184132ae6758d574 我为它们添加了一个边框，以便更容易欣赏，它们的位置是绝对的，但它们有很多“空白”它们两侧的空间最终会溢出整个视图
你能显示代码吗？

标签： css reactjs image width

【解决方案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%;
}

【讨论】：