css 一个div中的内容大小应该与它的父div相对应

2jcobegt 于 2024-01-09 发布在其他

关注(0)|答案(1)|浏览(100)

我有一个div，最大宽度为40%，最大高度为25%。在这个里面有一个图像。我希望图像的大小是它的父div的80%。下面的代码供参考。

<div className="inputbox-container">
        <img className="inputbox-icon" src={icon}/>
        <input
            className="inputFeild"
            placeholder="Email Id"
        />
       </div>

字符串
SCSS

.inputbox-container {
    background-color: red;
    max-width: 40%;
    max-height: 25%;
    border: 0.5px solid grey;
    border-radius: 7px;
    display: flex;
    align-items: center;
    padding: 10px;
    position: relative;
}

.inputbox-icon {
    height: 80%;
}

型
由于.inputbox-icon的高度为80%，图像成为屏幕大小的80%。.inputbox-container的高度也变成了800px。我如何使内容的大小相对于父级的大小。如果input-container占据屏幕的25%，那么其中的图像应该占据input-container的80%。

css

来源：https://stackoverflow.com/questions/77723178/size-of-contents-inside-a-div-should-be-respective-to-its-parent-div

1条答案

按热度按时间

dzjeubhm1#

解决方案！

在样式文件中使用.css扩展名，例如style.css解决方案代码给予如下解决方案图像。解决方案图像：Solution image as you want图像说明：正如你所说，你希望你的图像应该是你的容器的80%高度25%高度所以你必须使用height: 25vh; 25 vh = 25%显式地设置容器的高度，或者你可以根据你的设计需要修改这里是下面给出的代码。👇

.container {
  max-width: 40%;
  height: 25vh;
  /* 25% of the viewport height also Adjust the value based on your design */
  border: 5px solid rgb(0, 0, 0);
  border-radius: 7px;
  display: flex;
  padding: 10px;
  position: relative;
}

.container>.image {
  width: auto;
  height: 80%;
  max-width: 100%;
  /* Ensure the image doesn't exceed the width of the container */
}

.container>input {
  height: min-content;
}

个字符

赞(0）回复(0）举报 2024-01-09

我来回答

css 一个div中的内容大小应该与它的父div相对应

1条答案

相关问题

热门标签

最新问答