Question

我制作了两张图片：一张用于正常显示（350px x 43px），另一张用于视网膜（700px x 86px）。使用下面的代码一切正常，因为它应该关于更改图像，但hi-res.jpg正在显示他的实际大小700px x 86px？我对视网膜图形完全不熟悉，因此不知道解决这个问题的正确方法。两个图像都应该在350px宽和43px高的div内！

我认为发生的事情是在视网膜显示器上每英寸有更多的像素，因此需要更大的图像。我制作了一个更大的图像，但是如何在div中包含它并使其正确显示？

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
    .retina-logo{
        display: block;
        text-align: center; 
        max-height: 43px; 
        max-width: 350px; 
        margin-top: 15px;
    }
}

HTML

<div class="logo"><img src="elements/logo.jpg"></img></div>
<div class="retina-logo"><img src="elements/hi-res-logo.jpg"></img></div>

非常感谢您的帮助。我一直在尝试各种各样的CSS来解决这个问题！

Answer 1

我一直在做的是添加height =“...”然后添加最小尺寸的高度值

实施例：你想要一个400px x 400px的图像;

创建＆amp;使用双倍大小的文件（800px）然后做这样的事情：

＆LT; img src =“./ img / pathto / .jpg”height =“400”＆gt;

我有一个Macbook Pro Retina，这种方法效果很好。你也可以使用@ 2x javascript（Google it）。这会自动切换到正确的图像。

希望这会有所帮助。

Answer 2

你的div是适合图像的大小，但你还需要设置一个高度＆amp;图像本身的宽度。默认情况下，图像不会缩放。尝试这样的事情：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){
    .retina-logo{
        display: block;
        text-align: center; 
        max-height: 43px; 
        max-width: 350px; 
        margin-top: 15px;
    }
    .retina-logo img{
       width: 100%;
       height: auto;
    }
}

Retina Graphics显示太大了？

2 个答案: