He intentado redimensionar automáticamente la imagen usando la propiedad CSS max-width, pero no funciona en IE7 e IE8. ¿Hay alguna forma de cambiar automáticamente el tamaño de la imagen con CSS puro en IE7 e IE8?¿Cómo cambiar automáticamente el tamaño de la imagen para un diseño receptivo con CSS puro?
intentar algo como esto:
width: expression(document.body.clientWidth > 800 ? "800px" : "auto");
/* If page is wider than 800px then set width to 800px, otherwise set to auto */
Source (pena echar un vistazo a)
La mayoría de los desarrolladores web saben que IE se ha quedado atrás en la carrera por las normas y ser capaz de mostrar la última y el más grande. Muchas propiedades de CSS2 no son compatibles. Algunos de los más útiles son propiedades como max-width, max-height, min-width y finalmente min-height. Prueba esto:
<html>
<style>
p {
border:1px solid red;
width:expression(
document.body.clientWidth > (500/12) *
parseInt(document.body.currentStyle.fontSize)?
"30em":
"auto");
}
</style>
<body>
<p>
[alot of text]
</p>
Aunque desprecio IE y/o MS por diferentes razones, una de ellas es que tuve que hacer que los diseños funcionen para IE6/7 :), no creo que IE10 "se haya retrasado en la carrera por los estándares". Están o volverán. – FelipeAls
Usted necesita una expresión en caché de una sola vez para IE 6-7.
IMG {
zoom:expression(
function(t){
t.runtimeStyle.zoom = 1;
var maxW = parseInt(t.currentStyle['max-width'], 10);
var maxH = parseInt(t.currentStyle['max-height'], 10);
if (t.scrollWidth > maxW && t.scrollWidth >= t.scrollHeight) {
t.style.width = maxW;
} else if (t.scrollHeight > maxH) {
t.style.height = maxH;
}
}(this)
);
}
Ejemplo: http://kizu.ru/lib/ie/minmax.html archivo de origen JS: http://kizu.ru/lib/ie/ie.js
Autor: Roman Komarov
Uso width: inherit; a hacer que funcione con CSS puro en IE8. (Ver responsive-base.css.) De esta manera:
img {
width: inherit; /* This makes the next two lines work in IE8. */
max-width: 100%; /* Add !important if needed. */
height: auto; /* Add !important if needed. */
}
no estoy seguro si funciona en IE7-favor probarlo y háganos saber si se está probando IE7. Antes me di cuenta de la técnica width: inherit que estaba usando el jQuery a continuación, por lo que pude probarlo si realmente necesita soporte a Internet Explorer 7 y la primera técnica no funciona:
<!--[if lt IE 9]><script>
jQuery(function($) {
$('img').each(function(){
// .removeAttr supports SSVs in jQuery 1.7+
$(this).removeAttr('width height');
});
});
</script><![endif]-->
Has salvado mi vida. ¡Gracias! Esto funcionó perfectamente en IE 8. No probé en IE 7 ya que no tenemos que soportarlo. –
@JeremyGlover Impresionante, sí, sabía que tenía que haber una forma: había intentado un montón de cosas y 'width: inherit' era lo que hacía el truco. – ryanve
Does not IE 7 8 & reconocer lo siguiente:
#my-div img
{
max-width:100%;
_max-width:100%;
}
uso max-width: 100% con height:auto, además width:auto para IE8:
img
{
max-width: 100%;
height: auto;
}
/* Media Query to filter IE8 */
@media \0screen
{
img
{
width: auto;
}
}
Como también quiere apoyo a los medios queries..You puede utilizar el siguiente polyfill para añadir soporte para las consultas de los medios de comunicación a IE6-IE8
https://github.com/scottjehl/Respond (de tamaño muy pequeño, apenas 1-2kb minified y gzip) continuación, utilizar el CSS siguiente:
@media screen and (min-width: 480px){
img{
max-width: 100%;
height: auto;
}
}
he probado y trabajando para todos los navegadores
img{
height: auto;
max-width: 100%;
}
Nanba buena pregunta ....... – anglimasS
'' expression' se acaba javaScript' dentro de una hoja de estilo, que ganó' t funciona si el usuario gira 'ja vaScript' abajo. Por lo tanto, será mejor que uses javaScript para mantener limpia tu hoja de estilos – steveyang
, sí, estás en lo cierto, creo que usar javscript es mejor que utilizar css no limpios. – Viduthalai