html - imagen - img responsive bootstrap 4
Las imágenes responsivas Bootstrap 3.img no responden dentro del fieldset en Firefox (12)
En Firefox (probado en Win7 y Win8), con el siguiente código: cuando una imagen receptiva está dentro de un <fieldset> ya no responde. Esto significa que a medida que mi forma cambia de tamaño para el teléfono, la imagen no se reducirá en consecuencia.
Puedo "solucionar" el problema fácilmente, así que no necesito ayuda con eso. Sin embargo, si conoce una forma de solucionar esto, sería muy apreciado.
La imagen receptiva en el siguiente código no responderá al tamaño del navegador en FireFox (al menos en Win7 y Win8) a menos que elimine <fieldset> y <legend> .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fieldset Responsive Image Test</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
</head>
<body>
<div id=''content'' class=''container''>
<div class=''row''>
<div class=''col-xs-10 col-xs-offset-1''>
<form>
<fieldset>
<legend>I Am Legend</legend>
<img class=''img-responsive'' src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5MDAiIGhlaWdodD0iNTAwIj48cmVjdCB3aWR0aD0iOTAwIiBoZWlnaHQ9IjUwMCIgZmlsbD0iIzY2NiIvPjx0ZXh0IHRleHQtYW5jaG9yPSJtaWRkbGUiIHg9IjQ1MCIgeT0iMjUwIiBzdHlsZT0iZmlsbDojNDQ0O2ZvbnQtd2VpZ2h0OmJvbGQ7Zm9udC1zaXplOjU2cHg7Zm9udC1mYW1pbHk6QXJpYWwsSGVsdmV0aWNhLHNhbnMtc2VyaWY7ZG9taW5hbnQtYmFzZWxpbmU6Y2VudHJhbCI+U2Vjb25kIHNsaWRlPC90ZXh0Pjwvc3ZnPg==" alt="img" />
</fieldset>
</form>
</div>
</div>
</div>
</body>
</html>
Cambie .img-responsive dentro de bootstrap.css a lo siguiente:
.img-responsive {
display: block;
max-width: 100%;
width: 100%;
height: auto;
}
Por alguna razón, agregar ancho: 100% a la mezcla hace que el trabajo responda img.
Cambie la clase img en respuesta a:
.img-responsive, x:-moz-any-link {
display: block;
max-width: 100%;
width: auto;
height: auto;
Creé este script para resolver el problema de la clase img-responsive bootstrap3, ¡y en mi caso esto se resolvió!
$(document).ready(function() {
if ($.browser.msie) {
var pic_real_width, pic_real_height;
var images = $(".img-responsive");
images.each(function(){
var img = $(this);
$("<img/>")
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width;
pic_stretch_width = $(img).width();
if(pic_stretch_width > pic_real_width)
{
$(img).width(pic_real_width);
}
});
});
}
});
En mi caso, solo quería que la imagen se comportara de manera receptiva a escala móvil, así que creé un estilo css .myimgrsfix que solo se activa a escala móvil.
.myimgrsfix {
@media(max-width:767px){
width:100%;
}
}
y lo apliqué a la imagen <img class=''img-responsive myimgrsfix'' src=''whatever.gif''>
Esto parece un problema de Bootstrap ...
Actualmente, aquí hay una solución: agrega .col-xs-12 a tu imagen receptiva.
Para mi problema, no quería que mis imágenes escalaran al 100% cuando no estaban destinadas a ser tan grandes como el contenedor.
Para mi contenedor xs (<768px como .container), no tener un ancho fijo causó el problema, así que le puse uno de nuevo (menos el relleno de col de 15px).
// Helps bootstrap 3.0 keep images constrained to container width when width isn''t set a fixed value (below 768px), while avoiding all images at 100% width.
// NOTE: proper function relies on there being no inline styling on the element being given a defined width ( ''.container'' )
function setWidth() {
width_val = $( window ).width();
if( width_val < 768 ) {
$( ''.container'' ).width( width_val - 30 );
} else {
$( ''.container'' ).removeAttr( ''style'' );
}
}
setWidth();
$( window ).resize( setWidth );
Parece ser un error del navegador.
10690: Reportó un error en Firefox para las imágenes receptivas (aquellas con ancho máximo: 100%) en las celdas de la tabla. Ningún otro navegador se ve afectado. Ver
.img-responsive en <fieldset> tiene el mismo comportamiento.
Similar a la respuesta dada por Abdul.
<fieldset>
<legend>Image</legend>
<img src="..." class="img-responsive" width="100%" />
</fieldset>
Funciona correctamente en FF 29, Opera 12.17, Chromium 34 y en IE9. Sí, es un conjunto extraño de navegadores!
Todo lo que necesita es width:100% algún lugar que se aplica a la etiqueta como se muestra en las diversas respuestas aquí.
Usando col-xs-12:
<!-- adds float:left, which is usually not a problem -->
<img class=''img-responsive col-xs-12'' />
O CSS en línea:
<img class=''img-responsive'' style=''width:100%;'' />
O bien, en su propio archivo CSS, agregue una definición adicional para .img-responsive
.img-responsive {
width:100%;
}
LA RAÍZ DEL PROBLEMA
Este es un error conocido de FF que <fieldset> no respeta las reglas de desbordamiento:
https://bugzilla.mozilla.org/show_bug.cgi?id=261037
Un "ARREGLO" de CSS para arreglar el error de FireFox sería hacer que se <fieldset> display:table-column . Sin embargo, al hacerlo, según el siguiente enlace, la visualización del fieldset fallará en Opera:
https://github.com/TryGhost/Ghost/issues/789
Entonces, simplemente configure su etiqueta al 100% de ancho como se describe en una de las soluciones anteriores.
agregue condición solo a Firefox en su archivo css personalizado.
/* only Firefox */
@-moz-document url-prefix() {
.img-responsive, .thumbnail>img, .thumbnail a>img, .carousel-inner>.item>img, .carousel-inner>.item>a>img {
width: 100%;
}
}
en FF usa estilo en línea, es decir,
<img src="..." class="img-responsive" style="width:100%; height:auto;" />
Rocas :)
simplemente agregue .col-xs-12 a su imagen receptiva. Debería funcionar