Images not scaling on devices

I'm really struggling with the homepage of mi sitio web.

The images saying Animation and Interactive, Web Design, Print Design and Illustration look fine on my computer, but when I look at my site on my iPad they aren't scaling properly.

Aquí está el CSS:

#content { 
   position: relative;
   color: #333;
   width:100%;
   min-width: 900px;
   border:none;
   background: none;
   overflow:auto;
   padding-right:32px;
   padding-left:32px;
   padding-bottom: 86px;
}
#slideshow {
   position:relative;
   height:462px;
   z-index:-1;
}
#slideshow IMG {
   position:absolute;
   top:0;
   left:0;
   z-index:8;
}
#slideshow IMG.active {
   z-index:10;
}
#slideshow IMG.last-active {
   z-index:9;
}
#rightholder {
   float: right;
   clear: left;
   max-width: 639px;
   width: 60%;
   padding-top: 90px;   
   z-index:11;
}
.right {
   float:right;
   margin-bottom:20px;
   max-width: 50%;
   z-index:13;
}
.left{
   float:left;
   margin-bottom:20px;
   max-width: 50%;
   z-index:12;
}

preguntado el 31 de julio de 12 a las 10:07

what do you mean they don't scale on iPad? there is no css on them to make them scale. -

They're all fixed dimension images so they wouldn't. You want to set the dimensions in the CSS. -

I defined the dimensions in the html, I'll try doing it in the CSS. Thanks Here's the HTML: <a href="illustration.html"><img src="images/index/illustration.png"width="307" height="118" max-width="100%" alt="Illustration"/></a> -

1 Respuestas

I'm not sure exactly what you're trying to achieve but I believe your problem mainly comes from some of your min-width y max-width properties that constraint the page when resizing.

If you're using flexible units, you should try to let the layout be as fluid as possible. I'm guessing you're using these properties to prevent odd behaviors, for that you should rather use preguntas de los medios to adapt your design to various resolutions.

You should also make sure you don't set fixed sizes to your images (either in your CSS or HTML documents). Instead, use img { max-width: 100%; }.

Espero eso ayude.

Respondido 31 Jul 12, 13:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.