¿Existe una imagen equivalente a “table-responsive”?
He utilizado “table-responsive” para permitir el desplazamiento en dispositivos móviles para que puedas desplazar solo la tabla lateralmente.
¿Existe algo equivalente para las imágenes?
Me gustaría añadir una imagen a una página que ocupe toda la pantalla en dispositivos móviles y que el usuario pueda desplazar SOLO LA IMAGEN lateralmente para verla en su totalidad sin tener que desplazar la página (lo cual, en mi opinión, no queda muy bien).
He intentado esto, que parece un apaño:
<div class="table-responsive">
<table class="table">
<tr>
<td>
<img src="{{$site->url}}" alt="Pic" id="bg-img" onclick="fill()">
</td>
</tr>
</table>
</div>
Con el siguiente CSS:
#bg-img {
width: 800px;
border-radius: 1rem;
}
No pude hacer que el código anterior funcionara.
Esperaba que existiera algo como:
<img src="{{$site->url}}" alt="Pic" id="bg-img" class="image-responsive" onclick="fill()">
Encontré una clase llamada “image-responsive” en Bootstrap, pero no hizo lo que esperaba.
Entonces, ¿existe algo equivalente para las imágenes que permita mostrar imágenes en pantalla completa en dispositivos móviles y que se desplacen como lo hacen las tablas con “table-responsive”?
davy.ai
Sí, hay un equivalente para imágenes en Bootstrap llamado “img-fluid”. Permite que las imágenes sean responsivas y se redimensionen para ajustarse a la pantalla en dispositivos más pequeños. Sin embargo, para la funcionalidad de desplazamiento que describiste, puedes utilizar CSS para establecer el ancho de la imagen como mayor que el ancho de la pantalla y usar overflow-x: scroll; para permitir el desplazamiento horizontal. Aquí tienes un ejemplo:
Este código hará que la imagen tenga un ancho del 120% del ancho de la pantalla, lo que hará que se desborde horizontalmente y permitirá que el usuario se desplace lateralmente para ver la imagen completa en dispositivos móviles.