1

我制作了两张图片：一张用于正常显示（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 来解决这个问题！

4

2 回答 2

3

我总是做的是添加 height="..." 然后是最小尺寸的高度值

示例：您想要一个 400px x 400px 的图像；

创建和使用双倍大小（800px）的文件然后执行以下操作：

<img src="./img/pathto/.jpg" height="400">

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

希望这会有所帮助。

于 2014-06-18T16:06:48.193 回答
1

您的 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;
    }
    .retina-logo img{
       width: 100%;
       height: auto;
    }
}
于 2014-06-18T16:19:29.813 回答