我已经制作了两张图片：一张用于正常显示（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来解决此问题！
我总是做的是添加height =“ ...”，然后添加最小尺寸的高度值
示例：您想要一张400px x 400px的图片；
创建并使用两倍大小（800px）的文件，然后执行以下操作：
<img src =“ ./ img / pathto / .jpg” height =“ 400”>
我有一台Macbook Pro Retina，这种方法效果很好。您也可以使用@ 2x javascript（谷歌浏览器）。这将自动切换到正确的图像。
希望这会有所帮助。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句