mobil cihazda resmin istediğim gibi gözükmemesi

01-02-2015, 18:38:25

Üyeliği durduruldu

selam altta görünen şekilde css kodum var tarayıcıların hepsinde istediğim şekilde resim gözüküyor ama mobil cihazlarda logo minicik ve en üstte ortada gözüküyor bilgisayarda sağladığım görüntüyü mobil cihazlara nasıl yansıtabilirim.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

 <link rel="stylesheet" type="text/css" />
 <style>
body {
background: url(logo.png) no-repeat center center fixed #FFCC00;
-moz-background-size: 100% 100%;           /* Firefox 3.6 */
	-o-background-size: 100% 100%;           /* Opera 9.5 */
	-webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
background-size:contain;


  }


 </style>
<body>
</body>
</html>

02-02-2015, 16:39:21

Frknozsoy

backlink adlı üyeden alıntı: mesajı görüntüle

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

 <link rel="stylesheet" type="text/css" />
 <style>
body {
background: url(logo.png) no-repeat center center fixed #FFCC00;
-moz-background-size: 100% 100%;           /* Firefox 3.6 */
	-o-background-size: 100% 100%;           /* Opera 9.5 */
	-webkit-background-size: 100% 100%;           /* Safari 3.0, Chrome */
background-size:contain;


  }


 </style>
<body>
</body>
</html>

Bende genel olarak masaüstü sitelerde pixel veya yüzdelik kullanıyorum ve logoyu background olarak veriyorum.Ancak mobil sitelerde bu olmaz.

Buna şu şekilde çözüm bulabiliriz logonun a taglarını oluşturup logonun dışında bulunan yüzdelike göre logonun yüzdesini belirliyorum sonra tagların icine img olarak logoyu koyuyorum ve max width veriyorum ki yüzdelik bir yerden sonra cıktığında resmin görüntü kalitesi bozulmasın diye yazım anlaşılır olmamış olabilir bunun için

Örnek:

<div id="wrapper">
<div id="header_wrap">
<a class="logo"><img src="images/logo.png" /></a>
</div>
</div>

#wrapper {
	width: 100%;
	height: auto;
	margin: 0px;
	padding: 0px;
}
#wrapper #header_wrap {
	background-image: url(../images/header_bg.png);
	background-repeat: no-repeat;
	background-position: center top;
	height: 83px;
	width: 100%;
	margin: 0px;
	padding: 0px;
	position: relative;
	padding-top:7px;
}
#wrapper #header_wrap .logo {
	width: 28.1%;
	padding: 0px;
	height: auto;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
	max-width:135px;
	display:block;
}