Question

这是样式，它在React中，但我认为CSS解决方案没问题。

var ontop = {
            position: 'absolute',
            display: 'block',
            height:'auto',
            width: '50%',
            margin: 'auto',
            marginTop: '-50%',
        };

基本上如果分辨率降低，它实际上不适用于这种造型。它是另一张图像上的图像。我基本上试图复制这个网站http://www.milkbardigital.com.au/。

这是html（它实际上是jsx，但并不重要）。

            <div style={heroStyle}>
                <Image
                    style={background} responsive
                    src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Home-Background.jpg">
                </Image>
                    <Image
                        style={ontop} responsive
                        src="http://www.milkbardigital.com.au/wp-content/uploads/2015/11/Milkbar-Digital-Media.png">
                    </Image>
            </div>

感谢帮助。我认为它涉及使用@resolution来修复！

干杯伴侣！

修改

以下是其他款式

var background = {
            backgroundSize : 'cover',
            width: '100%',
        };

var heroStyle = {
            width:'auto',
            overflow : 'hidden',
        };

Answer 1

作为评论对待我没有评论意见

尝试使用bootstrap，它有包含媒体对象的css类，对每个平台和分辨率都有完全响应。

使图像以多种分辨率正确显示

1 个答案: