我有以下代码，即一个计数器：
<!-- Start of StatCounter Code for Weebly -->
<script type="text/javascript">
var sc_project=8437173;
var sc_invisible=0;
var sc_security="9afa2edd";
var scJsHost = (("https:" == document.location.protocol) ?
"https://secure." : "http://www.");
document.write("<script type='text/javascript' src='" + scJsHost +
"statcounter.com/counter/counter.js'></script>");
</script>
无脚本：
<div class="statcounter">
<a title="weebly statistics" href="http://statcounter.com/weebly/" target="_blank">
<img class="statcounter" src="https://c.statcounter.com/8437173/0/9afa2edd/0/" alt="weebly statistics" width:10px >
</a>
</div>
<!-- End of StatCounter Code for Weebly -->
我已经将页面配置为宽度：100％以将页面调整到浏览器的宽度，但是，计数器也会调整。我想为柜台设置一个最大尺寸。
如何设置计数器不适应浏览器的宽度？
感谢。
我添加了我的css代码：
/* Resets
--------------------------------------------------------------------------------*/
ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, body, html, p, blockquote, fieldset, input {
margin: 0;
padding: 0;
}
a img {
border: 0;
/*NOTA: si se utiliza el width en la imagen se modifica el tamaño de la imagen del logo.
Se puede utilizar tanto en porcentaje como en pxels, pero en porcentaje no parece que se modifique,
solo si se indica en pixels.
Si se indica en % se ajusta al tamaño siempre que sea para hacerlo más pequeño pero no para hacerlo más grande.
ESTO ES UN AÑADIDO propio, no es original de la web.
Es necesario para que el logo del encabezado se ajuste al tamaño del browser, lo malo es que el contador del pie
de página también se ajusta al tamaño del browser.*/
width: 100%;
/*@NOTA: eh height modica todas las imágenes del la página.*/
//height: auto;
}
a {
color: #6ca9d5;
text-decoration: none;
}
a:hover {
color: #90cbf5;
}
/* General Styling and Structure
--------------------------------------------------------------------------------*/
body {
font-family: Tahoma, Geneva, sans-serif;
font-size: 14px;
color: #868686;
/*NOTA: el margen es el que se deja entre el borde del navegador y el contenido. Por defecto es 0.
El padding es parecido y por defecto también es 0. Aunque se cambia y no hace nada.
Se tiene que poner 10px por ejemplo, px para indicar pixels. Si se pone 10% entonces es en porcentaje.
Afecta tanto al encabezado como al body.*/
margin: 1%;
padding: 0;
background: #fafafa;
}
h2 {
font-size: 1.7em;
margin: 0;
padding: .3em 0;
line-height: 1.2;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
}
#content h2 {
color: #90cbf5;
}
p {
font-size: 1em;
line-height: 1.5;
margin: 0;
padding: .5em 0;
}
#content p {
color: #868686;
}
#content abbr {
border-bottom: 1px dotted #8f8f8f;
}
#header-wrap,
#main-wrap {
background: #fff;
/*@NOTA: especifica el ancho de toda la página menos del encabezado. Por defecto width es auto
lo que quiere decir que el navegador determinará el ancho, es lo que se quiere. Como es por defecto si se quita la
propiedad funicona igual.*/
//width: auto;
/*@NOTA: si no se indica un tamaño mínimo, el contenido de toda la página se ajustan al tamaño del browser,
tanto en agrandar como en disminuir. Lo malo es que no afecta al encabezado.*/
//min-width: 1200px;
vertical-align: baseline;
}
#page {
/*@NOTA: esto no deja margen a los lados, si no se indica width, pega todo al máximo de la resolución de pantalla.
Por defecto es 0 auto*/
margin: 0 auto;
/*@MODIFICACION: este es el valor original. Si se amplia a 1300px por ejemplo ocupa todo el ancho
//de pantalla. Si no se pone nada, se pega todo a la pantalla sin márgenes.
Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/
/*width: 900px*/
/*@NOTA: si se indica un ancho automático se ajusta también al tamaño de pantalla.
Se ajusta al tamaño de pantalla, no al tamaño de la ventana del navegador.*/
width: 100%;
}
#header {
padding: 0;
margin: 0;
}
.wsite-logo,
.wsite-logo a {
color: #90cbf5;
margin: 0;
padding: 0;
text-decoration: none;
}
.wsite-logo,
.wsite-logo a:hover {
color: #90cbf5;
}
#logo,
#logo a {
font-size: 36px;
color: #90cbf5;
font-weight: normal;
padding: 0;
font-family: "Actor", Arial, Helvetica, sans-serif;
}
#header-right a {
color: #6ca9d5;
}
#header-right a:hover {
color: #90cbf5;
}
/* Header Area
-------------------------------------------------------------*/
#header {
/*El ancho parece que no se ajusta a nada, si se pone muy pequeño el logo se sigue viendo
completo*/
width: 100%;
/*@NOTA: esto modifica el alto del encabezado, que es donde está el logo.*/
height: 100px;
}
#header,
#header table {
border-collapse: collapse;
border-spacing: 0;
}
#header td {
vertical-align: middle;
/*@NOTA: la alineación modifica la posición de la imagen de la cabecera de GTS.
Para que la imagen se reescale al tamaño del navegador se debe poner como left y en el editor
del ecabezado hacer la imagen tan grande para que llegue hasta la derecha.*/
text-align: left;
}
#logo {
/*@NOTA: el padding controla la separación desde la parte superior hasta la imagen del lgo de GTS.
El primer número indica el padding desde la parte superior y el segundo desde la izquierda.
El padding empieza a contar desde el margen de la página, es por tanto una adición al margen.
Se pueden indicar también porcentajes.*/
padding: 0 0;
/*@NOTA: la opaciodad se indica con porcetanje. 1 es 100 de opacidad. Se Cambia la opacidad de la imagen
del logo de GTS de la cabecera.
ESTO ES AÑADIDO, no es original de la web.*/
//Opacity: 0.2;
}
#statcounter div.statcounter{
max-width: 100px;
max-height: 100px;
}
#header-right {
padding: 0 0 0 10px;
}
#header-right table {
width: 1px;
}
#header-right table,
#header-right .search,
#header-right .wsite-search {
clear: right;
float: right;
}
#header-right td {
padding: 0;
}
/* TOP RIGHT: Phone Number
--------------------------------------------------------------------------------*/
#header-right .phone-number .wsite-text {
color: #868686;
font-size: 12px;
font-weight: normal;
font-family: Tahoma, Geneva, sans-serif;
text-decoration: none;
display: block;
white-space: nowrap;
margin: 5px 0 5px 15px;
}
/* TOP RIGHT: Social Links
--------------------------------------------------------------------------------*/
#header-right .wsite-social {
vertical-align: middle;
margin: 5px 0 0 10px;
}
#header-right .wsite-social-item {
width: 12px;
height: 12px;
margin: 0 0 0 12px;
}
#header-right .wsite-social-rss {
background: url(rss-h.png) no-repeat;
}
#header-right .wsite-social-linkedin {
background: url(linkedin-h.png) no-repeat;
}
#header-right .wsite-social-facebook {
background: url(facebook-h.png) no-repeat;
}
#header-right .wsite-social-twitter {
background: url(twitter-h.png) no-repeat;
}
#header-right .wsite-social-mail {
background: url(mail-h.png) no-repeat;
}
/* TOP RIGHT: Search Box
--------------------------------------------------------------------------------*/
#header-right .search {
}
#header-right .wsite-search {
margin: 5px 0 5px 15px;
vertical-align: middle;
}
#header-right .wsite-search-input {
width: 137px;
height: 13px;
border: none;
padding: 8px 8px 6px 8px !important;
font-family: Arial, Helvetica, sans-serif;
color: #848484;
font-size: 12px;
background: url(input-bg.png) no-repeat;
vertical-align: middle;
display: inline-block;
}
#header-right .wsite-search-button {
position: relative;
width: 30px;
height: 27px;
color: #010101;
font-size: 12px;
border: none;
margin: 0;
padding: 0;
background: url(submit-bg-blue.png) no-repeat;
vertical-align: middle;
display: inline-block;
}
/* Navigation
--------------------------------------------------------------------------------*/
#topnav {
clear: both;
margin: 0;
overflow: hidden;
}
#topnav ul {
list-style: none;
float: left;
}
#topnav ul li {
list-style: none;
float: left;
padding: 0 2px 0 0;
}
#topnav a {
float: left;
display: block;
color: #545454;
text-decoration: none;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
padding: 10px 15px 11px;
font-size: 13px;
border: 0;
outline: 0;
margin: 0;
list-style-type: none;
text-transform: uppercase;
line-height: 1;
}
#topnav li#active a,
#topnav a:hover {
color: #545454;
background: #e3f3ff;
border: 0;
}
/****************************** flyout menus ******************************/
#wsite-menus .wsite-menu li a {
font-family: Tahoma, Geneva, sans-serif;
padding: 9px;
color: #545454;
background: #e3f3ff;
border: 0;
border-bottom: 1px solid #b6d2e6;
}
#wsite-menus .wsite-menu li a:hover {
color: #545454;
background: #fdfeff;
}
/* main */
#main {
}
#content {
min-height: 400px;
/*@NOTA: el padding modifica la separación entre las banderas con los idiomas el menú.*/
padding: 30px 0;
}
#container {
/*width: 920px;*/
width: 1200px;
margin: 0 auto;
}
/*
#banner-wrap {
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
background: #f6f6f6;
min-width: 920px;
}
*/
/*
#banner-bot {
background: url(banner-bot.png) left bottom no-repeat;
padding-bottom: 14px;
}
#banner-top {
background: url(banner-top.png) no-repeat;
padding-top: 14px;
}
#banner-mid {
background: url(banner-mid.png) repeat-y;
padding: 0 10px;
overflow: hidden;
}
*/
/*
#banner-outer {
border: 6px solid #fff;
}
*/
/*
#banner {
background: url(banner-top.png) no-repeat;
padding-top: 14px;
position: relative;
}
*/
/* PAGE TYPE: banner-tall
--------------------------------------------------------------------------------*/
/*
.tall-header-page .wsite-header {
width: 888px;
height: 258px;
background: url(banner-tall.jpg) no-repeat;
}
*/
/* PAGE TYPE: banner-short
--------------------------------------------------------------------------------*/
/*
.short-header-page .wsite-header {
width: 888px;
height: 168px;
background: url(banner-short.jpg) no-repeat;
}
*/
.no-header-page #banner-wrap {
padding: 8px 0;
border-bottom: 1px solid #d4d4d4;
border-top: 1px solid #d4d4d4;
}
/*
.no-header-page #banner-bot {
display: none;
}
*/
/* PAGE TYPE: banner-landing
--------------------------------------------------------------------------------*/
.landing-page #banner {
border: none;
background: none;
padding: 0;
}
.landing-page #banner-detail {
background: #66c9c1;
}
#bannerleft {
float: left;
width: 504px;
padding: 0;
position: relative;
}
/*
#banner-b {
background: url(landing-bnr-mid-03.png) left bottom no-repeat;
padding-bottom: 14px;
}
*/
/*
#banner-t {
background: url(landing-bnr-top.png) no-repeat;
padding-top: 14px;
}
*/
/*
#banner-m {
background: url(landing-bnr-mid.png) repeat-y;
padding: 0 10px;
overflow: hidden;
}
*/
#banner-inner {
border: 6px solid #fff;
}
.landing-page .wsite-header {
/*width: 472px;*/
width: 1200px;
height: 318px;
background: url(banner-landing.jpg) no-repeat;
}
#bannerright {
float: right;
width: 366px;
padding: 65px 25px 0 25px;
}
#bannerright h2 {
color: #90cbf5;
font-size: 32px;
padding: 0 0 12px 0;
}
#bannerright p {
color: #868686;
font-size: 1.1em;
padding-bottom: 25px;
margin: 0;
}
#bannerright .wsite-button {
margin: 0;
}
/* PAGE TYPE: splash
--------------------------------------------------------------------------------*/
.splash-page #header {
width: 532px;
}
.splash-page #banner {
width: 527px;
height: 161px;
padding: 6px 4px 4px 6px;
background: url(banner-splash-bg.png) no-repeat;
}
.splash-page .wsite-header {
width: 515px;
height: 149px;
background: url(banner-splash.jpg) no-repeat;
}
.splash-page #content-container {
width: 528px;
}
.splash-page #content {
width: 528px;
}
.splash-page #footer {
width: 524px;
}
/* Footer
--------------------------------------------------------------------------------*/
#footer-wrap {
border-top: 1px solid #dedede;
background: #fafafa;
//min-width: 920px;
/*El foot afecta a donde está el crear web con weebly.*/
width: 100%;
}
#footer {
padding: 40px 0 45px;
font-size: 12px;
color: #666;
font-family: Arial, sans-serif;
text-align: right;
}
#footer p {
color: #666;
}
#footer a {
color: #919191;
}
#footer a:hover {
color: #6ca9d5;
}
#footer h2 {
font-size: 16px;
margin: 0 0 2px;
padding: .3em 0;
line-height: 1.5;
color: #414141;
font-family: "Actor", "Myriad Pro", Arial, Helvetica, sans-serif;
border-bottom:1px solid #ddd;
}
#footer span {
vertical-align: middle;
}
#footer .wsite-social {
vertical-align: middle;
}
#footer .wsite-social-item {
width: 12px;
height: 12px;
margin-right:6px;
}
#footer .wsite-social-rss {
background: url(rss.png) no-repeat;
}
#footer .wsite-social-linkedin {
background: url(linkedin.png) no-repeat;
}
#footer .wsite-social-facebook {
background: url(facebook.png) no-repeat;
}
#footer .wsite-social-twitter {
background: url(twitter.png) no-repeat;
}
#footer .wsite-social-mail {
background: url(mail-h.png) no-repeat;
}
.wsite-footer { /* make sure enough space between element footer and attribution */
margin-bottom: 15px;
}
/* Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-label {
display: inline-block;
color: #868686;
font-family: Tahoma, Geneva, sans-serif;
font-size: 1em;
padding: 12px 0 5px 0;
}
.form-radio-container {
color: #868686;
font-size: 14px;
font-family: Tahoma, Geneva, sans-serif;
}
.wsite-form-input {
font-family: Tahoma, Geneva, sans-serif;
font-size: 13px;
color: #868686;
background: #fff;
border: 1px solid #dcdcdc;
padding: 8px 4px 5px !important;
width: 300px;
line-height: 1; /* background:#fff url(field.png) repeat-x;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
*/
}
.form-select {
color: #868686;
border: 1px solid #dcdcdc;
font-size: 13px;
background: #fff;
font-family: Tahoma, Geneva, sans-serif;
padding: 3px 4px;
width: 320px;
height: 27px;
line-height: 27px; /*
background:url#fff (field.png);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
*/
}
/* Footer Form Customization
--------------------------------------------------------------------------------*/
.wsite-form-container {
margin-top:0px !important;
text-align:left;
}
.wsite-footer .wsite-form-label {
font-size: 1em;
padding: 5px 0 2px 0;
}
.wsite-footer .wsite-form-field {
width:300px !important;
}
.wsite-footer .form-radio-container {
font-size:1em;
}
.wsite-footer .wsite-form-input {
font-size: 1em;
width: 100% !important;
}
.wsite-footer .form-select {
width: 100%;
}
/* Buttons
--------------------------------------------------------------------------------*/
/*
Buttons are styled with background image sprites. There are 4 unique image files:
- small & normal-colored (button_small_grey.png)
- large & normal-colored (button_large_grey.png)
- small & highlight-colored (button_small_orange.png)
- large & highlight-colored (button_large_orange.png)
Each of these 4 types of buttons must define a :hover state (when user's mouse is over)
as well as an :active state (when the user presses down).
Look at the CSS (especially the inner .wsite-button-inner wrapper), as well as the
image files to understand how the liquid-width nature of these buttons work.
*/
/* small */
.wsite-button {
color: #333 !important;
font-family: Arial, Helvetica, sans-serif;
height: 34px;
display: inline-block;
font-size: 12px;
border: none;
font-weight: normal;
font-size: 13px;
text-decoration: none;
padding: 0 15px 0 0;
background: url(button.png) no-repeat 100% -105px;
}
.wsite-button:hover {
background-position: 100% -140px;
}
.wsite-button:active {
background-position: 100% -175px;
}
.wsite-button-inner {
height: 34px;
line-height: 34px;
display: block;
font-size: 14px;
font-weight: normal;
border: none;
text-decoration: none;
padding: 0 10px 0 25px;
background: url(button.png) no-repeat 0 0;
}
.wsite-button:hover .wsite-button-inner {
background-position: 0 -35px;
}
.wsite-button:active .wsite-button-inner {
background-position: 0 -70px;
}
/* large */
.wsite-button-large {
height: 41px;
background: url(button_large.png) no-repeat 100% -126px;
padding: 0 15px 0 0;
}
.wsite-button-large:hover {
background-position: 100% -168px;
}
.wsite-button-large:active {
background-position: 100% -210px;
}
.wsite-button-large .wsite-button-inner {
height: 41px;
line-height: 41px;
padding: 0 10px 0 25px;
background: url(button_large.png) no-repeat 0 0;
}
.wsite-button-large:hover .wsite-button-inner {
background-position: 0 -42px;
}
.wsite-button-large:active .wsite-button-inner {
background-position: 0 -84px;
}
/* highlight */
/*
Making the highlighted versions of the buttons is easy because we just need
to switch out the background images. This works because the different button
states (normal, :hover, :active) have their sprite coordinates in the same places.
*/
.wsite-button-large.wsite-button-highlight {
background-image: url(button_large_highlight_blue.png);
}
.wsite-button-large.wsite-button-highlight .wsite-button-inner {
background-image: url(button_large_highlight_blue.png);
}
.wsite-button-highlight {
color: #fff !important;
background-image: url(button_highlight_blue.png);
}
.wsite-button-highlight .wsite-button-inner {
background-image: url(button_highlight_blue.png);
}
答案 0 :(得分：1)
将CSS样式赋予div class =“statcounter”＆gt;
div.statcounter{
max-width: 100px !important;
max-height: 100px !important;
}
W3Schools示例：http://www.w3schools.com/cssref/pr_dim_max-width.asp
在您评论的网站上，问题似乎是：
a img { border: 0; width: 100%; //height: auto; }
http://www.globaltecnicosyservicios.com/files/main_style.css?1390835994
在规则3的css文件中。
此100％宽度使网站上的所有图片均为100％。
编辑：
使用css类并将其称为"large"，例如：
html : <img src="imageurl" class="large">
css: img.large { width:100% }
将想要100％宽度的图像更改为“大”类。请勿触摸其他图像。应该工作。
答案 1 :(得分：1)
您也可以尝试max-width，
.statcounter {
max-width: 100px;
}