Resolución de imágenes desconfiguradas en entradas de blog

Varian · 25 Ene 2014

Muy buenas, ya queda menos para que mi proyecto funcione gracias al esfuerzo y sobre todo en gran parte a la ayuda de algunos usuarios de Forobeta.

El problema que me está llevando horas es el de adaptar las imágenes de las entradas del blog para que mantengan al ratio aspecto, es decir, que no se tengan que adaptar a un tamaño que especifique el código de la plantilla. He intentado convertirlas al tamaño widht=auto y height=auto y terminan por tomar una forma irregular con la estética del blog. En la versión móvil alguna imagen es más grande de lo común.

Mi duda es: ¿cómo puedo arreglar el tamaño de estas imágenes para que no terminen descuadrando? ¿puede ser dándole un 100% dentro de unos márgenes? ¿es problema de la redacción del artículo o de la imagen insertada?

Para que veais el problema os dejo algunas entradas en prueba: Rubén Cánovas

Muchas gracias! :encouragement:

TicTac · 25 Ene 2014

Tenía el mismo problema que tu:
Ejemplo y solución:
@ media screen and (max-width:320px){.comments .comments-content .comment-replies{ margin-left:0}
img{display:block; margin:auto}
}

Agrega lo que está en negrita en los @ media de tu plantilla adaptable.

Mi error fue poner esto en mi plantilla :
img {
width:100%;
} y se descuadra la imagen.

Varian · 25 Ene 2014

Hola TicTac, gracias por la ayuda, he intentado ponerlo en los códigos CSS y se me descuadra de una manera brutal, lo he insertado en cada uno de los [MENTION=16931]medi[/MENTION]a, ¿son estos?

Insertar CODE, HTML o PHP:

/********************************************************************************************* 

9. Media Queries 

*********************************************************************************************/   
 
/* Tablet Landscape */  [MENTION=16931]medi[/MENTION]a screen and (max-width: 1060px) {


    body { min-width:100%; }
    .inner-wrap { width: 90%; padding: 0 3%; }
    #content { width:66%;}
    #navsocial { float:left; }

    #slider {width:100%; padding:0; }
    #slider #slides { width:100%; padding-left:0; }
    #slider #slides li img { width:100%; }
    #slider #slides .slide_content {width:60%; }
    #slider #slides.small-size .slide_content {width:70%; }
    #slider #slides h2 a { font-size: 22px;  }
 
    .home_widgets .home_column {  width: 32%; margin: 0 2% 0 0;  }
    .home_widgets .home_column img { width:auto; max-width:100%; height:auto; }

    .recent-post { width: 100%; float: left; }
    .recent-post .post-thumb { float:left; margin:0 10px 0 0;}

    .col_main,
    .full-width .col_main { width:80%; }
    .col_meta,
    .full-width .col_meta { width:16%; }

    #sidebar { width:30%; }
    #sidebar .widget {width:100%; margin-right:2%; float:left; }

    .cover { position: relative; padding-bottom: 56.25%; display:block; padding-top: 30px; height: 0; overflow: hidden; width: 100%; max-width: 100%; }
    .cover iframe,  
    .cover object,  
    .cover embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
 
     /* Template: Full-width */
    .full-width #content { width: 100%; }
    .full-width h1.archive_title { width:100%; }
    .full-width .entry img { max-width: 100%; }
    .full-width .entry .wp-caption { max-width:100%;  }
    
	#footer div.column { margin-right: 2%;  width: 31%; }
	#footer .column .widget {  width:100%; }

    .entry img.alignnone, 
    .entry img.aligncenter, 
    .entry img.alignleft, 
    .entry img.alignright,
    .entry img.attachment-fullsize {
        margin-bottom: 10px;
        max-width: 100%;
        width:auto;
        height:auto;
    }

    .full-width .entry img.alignnone, 
    .full-width .entry img.aligncenter, 
    .full-width .entry img.alignleft, 
    .full-width .entry img.alignright,
    .full-width .entry img.attachment-fullsize {
        margin-bottom: 10px;
        max-width: 100%;
        width:auto;
        height:auto;
    }
	
}

/* Tabled Portrait */  [MENTION=16931]medi[/MENTION]a screen and (max-width: 768px) {

    #slider #slides.small-size .slide_content { display:none; }

    .col_main, .full-width .col_main { width:100%; }
    .col_meta, .full-width .col_meta { width:100%; }
    .share_box .share_btn { float:left; width:30%; }

    .widget_archive li { width:100%;  }

    .share_box .share_btn:after {  content: ".";  display: block;  height: 0;  clear: both;  visibility: hidden;  }
 
}

/* All Mobile Sizes (devices and browser) */  [MENTION=16931]medi[/MENTION]a screen and (max-width: 640px) {


    .inner-wrap { width: 94%; padding: 0 3%; }
    #content { width:100%;}

    #slider #slides .slide_content { display:none; }
    #slider #slides { width:100%; padding-left:0; border:none; }
    #slider #slides li img { width:100%; }

    .home_widgets { margin-left:0%;  }
 
    .recent-post .post-content {overflow:visible; }
    .recent-post .post-thumb { width:100%; margin-right:0;}
    .recent-post .post-thumb img { width:100%;}
 
    #respond .form_fields { width:97%; margin:0; }
    #respond .comment-form-comment {width:99%; }
    #respond .form_fields input { width:98%; }
    .children #respond { margin-right:0; }
      
	#sidebar { width:100%; margin-left:0%;}
    #sidebar .widget {width:100%; margin-right:0%; float:none; }
    
    #footer div.column { margin-right: 0;  width: 100%; }
	#footer .column .widget { width:100%; }
 
}

.comments-content ol {   list-style: none outside none;
    margin: 0;
}
.avatar-image-container img {width:60px;height:60px; left: 0;
    position: absolute;
    top: 4px;}

.comments-content ol li {border-bottom: 1px solid #DEDEDE;
    font-size: 12px;
    line-height: 1.7;
    margin: 0 0 24px;
    padding: 0 0 0 76px;
    position: relative;}

.comments-content ol li .comment-actions{ display: block;
    font-size: 12px;
    padding: 0 0 24px;}	
	
.comments-content ol li ol li {border:none;margin: 0;}

.comments-content ol li ol .continue {display:block;padding: 0 0 0 76px;margin: 0 0 24px;}

.comments-content ol li cite {color: #B1B1B1;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;}
	
.comments-content ol li span.datetime { float: right;
    font-size: 12px;
    margin: 0;}
	
.comments-content ol li span.datetime a {color: #888888;}	
.thread-toggle {display:none;}

TicTac · 25 Ene 2014

Si bueno, mis [MENTION=16931]medi[/MENTION]a son así

PHP:

    [MENTION=16931]medi[/MENTION]a screen and (max-width:1100px){.main-wrapper{ margin:0 !important;  width:100%;  min-height:0px}
.sidebar-wrapper{ position:relative; top:auto;  right:auto;  clear:both;  left:auto;  padding:0;  width:auto;  background:none}
.sidebar-wrapper .widget{ border:none;  margin:0px auto 10px auto;  padding:10px 20px}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:960px){#header{ float:none;  max-width:none;  text-align:center}
#header-inner{ margin-bottom:0px}
#header h1{ margin-right:0px}
#header p.description{ margin:0}
.main-nav-main ul{ text-align:center}
.main-nav-main li{ float:none}
.footer-bottom .attribution{ text-align:center}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:850px){#header h1,#header h1 a{ font-size:50px;  line-height:350%}
.page-header .inner .ct-wrapper{ padding:0 48px}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:768px){.header-wrapper{ margin-right:0;  width:100%}
#header{ text-align:center;  width:100%;  max-width:none}
#header-inner{ margin:30px 0 0}
.main-nav-main{ border-bottom:0}
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4{ padding:20px 0;  width:50%}
.outer-wrapper{ padding:0}
#content{ padding:5px;  clear:both}
#comment-editor{ margin:10px}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:500px){#header img{ width:100%}
#header h1, #header h1 a{ font-size:28px}
.page-header .inner .ct-wrapper{ padding:0 10px}
.home-featured-1, .home-featured-2, .home-featured-3, .home-featured-4{ padding:20px 0;  width:100%}
.post-outer{ width:100% !important}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:420px){.comments .comments-content .datetime{ display:block;  float:none}
.comments .comments-content .comment-header{ height:70px}
img{display:block; margin:auto}
}
    [MENTION=16931]medi[/MENTION]a screen and (max-width:320px){.comments .comments-content .comment-replies{ margin-left:0}
img{display:block; margin:auto}
}

Tendrás algún valor de las imágenes en 100% en el CSS.
Siento no poder ayudarte más,voy bastante limitado en este tema.
A ver si aparece algún entendido.

Prueba editando esto,o en todos los img del media con el img{display:block; margin:auto} :

PHP:

}

    .full-width .entry img.alignnone, 
    .full-width .entry img.aligncenter, 
    .full-width .entry img.alignleft, 
    .full-width .entry img.alignright,
    .full-width .entry img.attachment-fullsize {
        margin-bottom: 10px;
        max-width: 100%;
        width:auto;
        height:auto;
    }

Varian · 25 Ene 2014

Sigue sin funcionar, seguiré mirando por Google, mientras alguien pueda ayudarme. Te agradezco tu ayuda!

---------- Post agregado el 25-ene-2014 hora: 22:16 ----------

¿Alguien puede ayudarme?

olaxpiston · 26 Ene 2014

Recién acabo de modificar las entradas de uno de mis blogs. Lo que yo hice fue colocar una clase en mis imágenes class="imagen" y luego el siguiente código css:

Insertar CODE, HTML o PHP:

.imagen {
display:block;
margin:auto;
width:500px;
height:345px;
}

Resolución de imágenes desconfiguradas en entradas de blog

Varian Seguir

TicTac

Varian

TicTac

Varian

olaxpiston