tamaño - imagen autoajustable html
¿Cómo cambiar el tamaño de una imagen para que quepa en la ventana del navegador? (9)
Esto parece trivial, pero después de toda la investigación y codificación no puedo hacer que funcione. Las condiciones son:
- El tamaño de la ventana del navegador es desconocido. Por lo tanto, no proponga una solución que implique tamaños de píxeles absolutos.
- Las dimensiones originales de la imagen son desconocidas, y pueden o no ajustarse a la ventana del navegador.
- La imagen está centrada vertical y horizontalmente.
- Las proporciones de la imagen deben conservarse.
- La imagen debe mostrarse en su totalidad en la ventana (sin recorte).
- No deseo que aparezcan las barras de desplazamiento (y no deberían, si la imagen se ajusta).
- La imagen cambia automáticamente de tamaño cuando las dimensiones de la ventana cambian, para ocupar todo el espacio disponible sin ser más grande que su tamaño original.
Básicamente lo que quiero es esto:
.fit {
max-width: 99%;
max-height: 99%;
}
<img class="fit" src="pic.png">
El problema con el código anterior es que no funciona: la imagen toma todo el espacio vertical que necesita al agregar una barra de desplazamiento vertical.
A mi disposición está PHP, Javascript, JQuery, pero me gustaría matar por una solución de solo CSS. No me importa si no funciona en IE.
Aquí hay una solución simple de solo CSS ( JSFiddle ), funciona en todas partes, móvil e IE incluido:
CSS 2.0:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
img {
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
HTML:
<body>
<img src="images/your-image.png" />
</body>
CSS3 introduce unidades nuevas que se miden en relación con la ventana gráfica, que es la ventana en este caso. Estos son vh y vw , que miden la altura y el ancho de la ventana gráfica, respectivamente. Aquí hay una solución simple de CSS:
img {
max-width: 100%;
max-height: 100vh;
height: auto;
}
La única advertencia es que solo funciona si no hay otros elementos que contribuyan con la altura en la página.
Cambiar el tamaño de la imagen para que se ajuste a la pantalla por el lado más largo manteniendo su relación de aspecto
img[src$="#fit"] {
width: 100vw;
height: auto;
max-width: none;
max-height: 100vh;
object-fit: contain;
}
-
width: 100vw- el ancho de la imagen será del 100% del puerto de visualización -
height: auto- la altura de la imagen será escalada proporcionalmente max-height: 100vw: si la altura de la imagen se vuelve mayor que el puerto de visualización, disminuirá para ajustarse a la pantalla, por lo tanto, el ancho de la imagen se reducirá debido a la siguiente propiedadobject-fit: contain: el contenido reemplazado se escala para mantener su relación de aspecto mientras se ajusta dentro del cuadro de contenido del elementoNota:
object-fites totalmente compatible solo desde IE 16.0
Mi regla de CSS perezoso general:
.background{
width:100%;
height:auto;
background: url(''yoururl.jpg'') no-repeat center;
background-position: 50% 50%;
background-size: 100% cover!important;
overflow:hidden;
}
Esto puede ampliar su imagen si es de baja resolución para empezar (eso tiene que ver con la calidad de la imagen y el tamaño en dimensiones. Para centrar su imagen, también puede intentar (en el CSS)
display:block;
margin: auto 0;
centrar tu imagen
en tu HTML:
<div class="background"></div>
Si está dispuesto a poner un elemento contenedor alrededor de su imagen, una solución pura de CSS es simple. Usted ve, el 99% de altura no tiene sentido cuando el elemento padre se extenderá verticalmente para contener sus hijos. El padre debe tener una altura fija, por ejemplo ... la altura de la ventana gráfica.
HTML
<!-- use a tall image to illustrate the problem -->
<div class=''fill-screen''>
<img class=''make-it-fit''
src=''https://upload.wikimedia.org/wikipedia/commons/f/f2/Leaning_Tower_of_Pisa.jpg''>
</div>
CSS
div.fill-screen {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
text-align: center;
}
img.make-it-fit {
max-width: 99%;
max-height: 99%;
}
Juega con el violín .
Tenía un requisito similar, y tenía que hacerlo CSS básico y JavaScript. No JQuery disponible.
Esto es lo que tengo trabajando.
<html>
<head>
<style>
img {
max-width: 95% !important;
max-height: 95% !important;
}
</style>
<script>
function FitImagesToScreen() {
var images = document.getElementsByTagName(''img'');
if(images.length > 0){
for(int i=0; i < images.length; i++){
if(images[i].width >= (window.innerWidth - 10)){
images[i].style.width = ''auto'';
}
}
}
</script>
</head>
<body onload=''FitImagesToScreen()''>
----
</body>
</html>
Nota: No he usado el 100% para el ancho de la imagen ya que siempre hubo un poco de relleno para considerar.
Actualización 2018-04-11
Aquí hay una solución de solo CSS y sin Javascript. La imagen se centrará dinámicamente y se redimensionará para ajustarse a la ventana.
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
}
.imgbox {
display: grid;
height: 100%;
}
.center-fit {
max-width: 100%;
max-height: 100vh;
margin: auto;
}
</style>
</head>
<body>
<div class="imgbox">
<img class="center-fit" src=''pic.png''>
</div>
</body>
</html>
La solución [otra, antigua], usando JQuery, establece la altura del contenedor de la imagen ( body en el siguiente ejemplo) para que la propiedad de max-height en la imagen funcione como se espera. La imagen también cambiará de tamaño automáticamente cuando se cambie el tamaño de la ventana del cliente.
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 0;
margin: 0;
}
.fit { /* set relative picture size */
max-width: 100%;
max-height: 100%;
}
.center {
display: block;
margin: auto;
}
</style>
</head>
<body>
<img class="center fit" src="pic.jpg" >
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" language="JavaScript">
function set_body_height() { // set body height = window height
$(''body'').height($(window).height());
}
$(document).ready(function() {
$(window).bind(''resize'', set_body_height);
set_body_height();
});
</script>
</body>
</html>
Nota: El usuario gutierrezalex empaquetó una solución muy similar a un plugin de JQuery en esta página.
html, body{width: 99%; height: 99%; overflow: hidden}
img.fit{width: 100%; height: 100%;}
O tal vez revise esto: http://css-tricks.com/how-to-resizeable-background-image/
width: 100%;
overflow: hidden;
Creo que eso debería ser el truco.