根据浏览器的屏幕分辨率更改徽标图像
[英]Change logo image based on screen resolution of the browser
问题描述
I have two images, one with the logo in black and one with the logo in white. 
我有两张图片，一张是黑色徽标，另一张是白色徽标。 I would like to have the white logo when the browser is less than 768px width and black logo when it's bigger. 当浏览器的宽度小于768px时我想要白色标识，当它更大时我想要黑色标识。 I tried something but is not changing in real time, only if I reload the page. 我尝试了一些但实际上并没有改变，只有当我重新加载页面时。
$(function() {
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
});
Any suggestion? 有什么建议吗？ Thank you 谢谢
6 个解决方案
解决方案1
5 已采纳 2016-04-04 11:59:07
https://api.jquery.com/resize/ https://api.jquery.com/resize/
You are correctly checking for the window's width, but you are only doing it when the page first loads in! 您正在检查窗口的宽度，但您只是在页面首次加载时才这样做！
Instead, use the resize function to run a script every time the screen is resized 而是每次调整屏幕大小时使用resize函数运行脚本
$(window).on("resize", function(){
if($(window).width() < 768){
$('.logo').find("img").attr("src","/images/Trin-02.png");
}
else{
$('.logo').find("img").attr("src","/images/Trin-01.png");
}
})
though this sounds more like a job for css media queries, though we don't about all your needs and requirements :) 虽然这听起来更像是css媒体查询的工作，但我们并不满足您的所有需求和要求:)
解决方案2
5 2016-04-04 12:04:52
You can do it just with css and media queries. 你可以用css和媒体查询来做到这一点。
img { width: 400px; content:url("http://mnprogressiveproject.com/wp-content/uploads/2014/02/kitten.jpg"); } @media screen and (max-width: 768px) { img { content:url("http://images6.fanpop.com/image/photos/34800000/Kittens-3-animals-34865509-1680-1050.jpg"); } }
<img alt="">
解决方案3
2 2016-04-04 12:00:46
I have a pure JavaScript solution 我有一个纯JavaScript解决方案
document.getElementsByTagName("BODY")[0].onresize = function() {
if (window.outerWidth < 768) {
document.getElementById("img").src = yourFirstImage.png;
} else {
document.getElementById("img").src = yourSecondImage.png;
}
}
解决方案4
1 2016-04-04 12:12:23
If you have the vector version of logo, make an imgname.SVG then change color using css. 如果您有徽标的矢量版本，请创建一个imgname.SVG，然后使用css更改颜色。 (SVG is scalable vector graphics and lmage will be of good quality) （SVG是可缩放的矢量图形和图像质量很好）
HTML HTML
<div class="logo"> <a href="index.html"><img src="images/imagename.svg"></a> </div>
CSS CSS
@media only screen and (max-width: 768px) {
.logo img{
background-color:#000;
height:50px;
width:100%;
}
}
解决方案5
0 2016-04-04 12:07:07
Here is the most simple solution, using CSS3 media queries, 这是使用CSS3媒体查询的最简单的解决方案，
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>media queries</title> <style> @media screen and (max-width: 780px) { body { background-image: url("/images/Trin-02.png"); } } @media screen and (min-width: 780px) { body { background-image: url("/images/Trin-01.png"); } } </style> </head> <body> </body> </html>
So, u can have image acc. 所以，你可以有图像acc。 to device you are using 你正在使用的设备
解决方案6
0 2016-04-04 12:22:29
There is no need to target the image multiple times. 无需多次定位图像。 Save a reference once, use it multiple times. 保存一次引用，多次使用它。
Create a callback function for the resize event and bind it. 为resize事件创建一个回调函数并绑定它。 That way you can also call the callback function to set the right image on init. 这样你也可以调用回调函数在init上设置正确的图像。
var image = $('.logo').find("img");
function setImage() {
var windowWidth = window.innerWidth,
src = (windowWidth < 768) ? '/images/Trin-02.png' : '/images/Trin-01.png';
image.attr('src', src);
}
$(window).on('resize', setImage);
setImage();
https://jsfiddle.net/0nxdpdp6/1/ https://jsfiddle.net/0nxdpdp6/1/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.