Question

似乎我的代码正在重复图像宽度的方式，只显示高度的一半？

    html, body {
        background-color: black;
    }
    
    .tile.floor {
        background-image: url('https://i.imgur.com/7es7QMs.png');
    }
    
    .tile.floor:empty::after {
        content: "\200b";
        visibility: hidden;
    }

    <div class="tile floor"></div>
    <script src="/assets/js/app.js"></script>

我在我正在使用的所有代码中附加了JS小提琴。

JS fiddle

Answer 1

尝试将.tile.floor的高度设置为图像的高度。

html, body {
    background-color: black;
}

.tile.floor {
    background-image: url('https://i.imgur.com/7es7QMs.png');
    height: 40px;
}

.tile.floor:empty::after {
    content: "\200b";
    visibility: hidden;
}

据我了解，它可以满足您的要求。

Answer 2

我不确定您在这里要什么。但是，如果您想将图像调整为元素的高度，请使用class LoginUser extends Component{ onLoginPressed(){ signInWithEmailAndPassword Method.... } render(){ <Button onPress={()=>this.onLoginPressed}>SIGN IN</Button> } } class AddDetails extends Component{ //Method which will add details to current signed in user's information render(){ return <Button onPress={Add info}></Button> } } //ROUTES NAVIGATOR var AppStackNavigator = createStackNavigator({ AddDetails: { screen: AddDetails }, LoginUser: { screen: LoginUser } }, {initialRouteName: 'LoginUser'})。

background-size: contain

CSS：图像仅显示高度的一半，并且在宽度方向显示的倍数？

2 个答案: