¿Por qué las imágenes no tienen más de 500 píxeles de ancho en Chrome?

Using a regular, reasonably wide Google Chrome browser, see http://abmphotography.beta.cjbm.net/aileen-kevin

The height of the images is defined in CSS, but the width should be automatic. It seems to work with the portrait images, but the landscape ones are limited to a maximum of 500px wide.

¿Alguien puede arrojar algo de luz?

preguntado el 10 de marzo de 12 a las 16:03

2 Respuestas

Colin, you are setting the max-ancho to 100% on two selectors:

img
.thumbnail > img

This is making the image as large as the container, thus not allowing for the expansion you seek. Disabling the max-ancho properties on Chrome made the image fit the height as you would expect, as it should on other browsers too.

respondido 10 mar '12, 17:03

Thanks - that's it. For some reason I'm now not able to override it (can't edit it directly as that's coming from the Bootstrap CSS), but that's another issue. - Colin

Ah, I can't override a set value with 'auto', but I can set it to 10000% which does the job. - Colin

You can also set it to 'max-width: none !important;' if it gets in your way. - Nathan

Bootsrap uses span1-span12 to control thumbnail width: twitter.github.com/bootstrap/components.html#thumbnails - Abrahán

Nathan - !important not ideal as I need to override it again elsewhere (see when you narrow the browser view). - Colin

To get the proper output as other browsers you have to remove the max-width from css, see below. I have removed the max-width:100%; from the below css.

.thumbnail > img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

respondido 10 mar '12, 17:03

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