Question

我正在使用React创建一个简单的网页。我有一个带有<img />标记的外部div和一个<div />标记，其中包含其他div和类似内容。 <img />没有调整大小（因此，如果我放大和缩小，它实际上只保持相同的大小）。 <div />标签确实（当我放大90％时，调整大小有点奇怪）。我只是好奇为什么会这样？ <div />中有3个图像，每个图像上都有文本。那么<img />标签实际上只是一个大徽标。有什么建议？下面是JSX

<div className='container'>
    <img src="logo.png" alt='Logo Large' className='logo' />
    <div className='container1'>
        <div alt='cc' className='container2'>
            <div className='cc'>
                asd
            </div>
        </div>
        <div alt='cc1' className='container3'>
            <div className='cc1'>
                asdddd
            </div>
        </div>
        <div alt='cc2' className='container4'>
            <div className='cc2'>
                123124
            </div>
        </div>
    </div>
</div>

下面是相关的CSS

html,
body,
#app {
    height: 100%;
    width: 100%;
}

body {
    background: #2aa9e0;
    user-select: none;
    color: #fff;
    overflow: hidden;
    font-family: 'Courier New';
}

.container {
    display: flex;
    align-items: center;
    height: 97%;
    width: 100%;
}

.container1 {
    display: flex;
    flex-direction: column;
    align-items: inherit;
    height: 80%;
    width: 50%;
}

.container1 .container2 {
    background-image: url("...");
    width: 628px;
    height: 324px;
    position: relative;
}

.container1 .container2 .cc {
    font-size: 52px;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 15%;
}

.container1 .container3 {
    background-image: url("...");
    width: 213px;
    height: 139px;
    position: relative;
}

.container1 .container3 .cc1 {
    font-size: 52px;
    position: absolute;
    width: 100%;
    text-align: center;
    top: 30%;
}

.container1 .container4 {
    background-image: url("...");
    width: 628px;
    height: 336px;
    position: relative;
}

.container1 .container4 .cc2 {
    font-size: 52px;
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 15%;
}

.container .logo {
    height: 70%;
    width: 50%;
}

非常感谢任何帮助。我开始使用flexbox，但有点偏离它，以便在container1

中正确对齐和整理所有内容

Answer 1

<img />没有调整大小，因为它的宽度设置为周围容器的WIDTH的50％。容器保持其放大/缩小的宽度，因此徽标也可以。

如果您希望徽标在放大/缩小时更改其大小，您可以使用类似：

.container .logo {
    width: 25em;
}

这样它使用相对于像素大小的宽度（1em = 16px）

jsx css sizing问题，可能的flex转换

1 个答案: