Thumbnail Distorcido

Dougs · Abril 13, 2011

Oi Pessoal, tudo bem? Sou novo aqui e já preciso de ajuda, hehe.

É o seguinte, coloquei um template novo no meu blog (uso como portfólio). Estou customizando, mas não

consigo resolver um problema: as imagens dos thumbnails estão distorcidas.

Mexi no trecho abaixo, mas só muda e continua distorcendo: :wacko:

.post img {
height:168px;
width:213px;
}

O blog é esse douglasportifolio.blogspot.com O código completo:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
<head>
<!--[if IE]>
&lt;script defer type="text/javascript" src="http://askerakbar.110mb.com/jquery/bgsleight.js"></script>
<![endif]-->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.title/></title>
<b:else/>
<title><data:blog.pageName/> | <data:blog.title/></title>
</b:if>
<b:skin><![CDATA[

/*-----------------------------------------------

Name         :  MyShowcase
Designer     :  AskerAkbar
URL          :  www.BloggerThemes.net

MyShowcase blogger theme comes under a Creative Commons license.
They are free of charge to use as a theme for your blog and 
you can make changes to the templates to suit your needs. 
and please you must keep the footer credit links intact which 
provides credit to its authors.

-----------------------------------------------*/

#navbar-iframe {
display:none!important;
}

* {
margin:0;
padding:0;
list-style:none;
border:none;
vertical-align:baseline;
outline:none;
}

.clear {
clear:both;
}

a:active {
outline:none;
}

a:focus {
moz-outline-style:none;
}

body {
background:#1c242e url(http://i474.photobucket.com/albums/rr109/coolwebbies/Premium/bodybg.jpg);
background-repeat:repeat-x;
margin:0;
color:#4b6d8e;
font:11px/22px Arial,Helvetica,sans-serif;
}

a {
color:#4b6d8e;
text-decoration:none;
}

a:hover {
color:#539de8;
text-decoration:underline;
}

a img {
border-width:0;
}

/* header-wrapper
-----------------------------------------------------------------------------------*/

#header-wrapper {
width:980px;
height:149px;
margin:0 auto;
}

#head-inner {
width:400px;
background-position:left; 
margin-left:auto;
margin-right:auto;
float:left;
}

#header {
text-align:left;
margin-top:0;
}

#r_head {
width:480px;
height:60px;
float:right;
padding-top:50px;
}

#header h1 {
color:#505c6d;
font-family:Arial;
font-weight:lighter;
font-style:normal;
font-size:30px;
margin-top:60px;
}

#header a {
color:#505c6d;
text-decoration:none;
}

#header a:hover {
}

#header .description {
font-family:Arial;
font-weight:lighter;
font-style:normal;
font-size:11px;
}

#header img {
margin-left:auto;
margin-right:auto;
}

/* menu
-----------------------------------------------------------------------------------*/

.menu {
height:20px;
width:980px;
font:10px arial;
padding:10px 0 0;
text-transform:uppercase;
text-align:center;
}

.menu li {
float:left;
float:left;
display:block;
margin:auto 20px;
list-style:none;
}

.menu li a:hover {
text-decoration:none;
}

/* wrappers
-----------------------------------------------------------------------------------*/

#outer-wrapper {
margin:0 auto;
text-align:left=;
width:980px;
}

#content-wrapper {
margin-top:25px;
}

#main-wrapper {
float:left;
overflow:hidden;
width:800px;
margin-right:18px;
background:#1A2129;
border:1px solid #10151C;
}

#sidebar-wrapper {
width:441px;
float:left;
word-wrap:break-word;
overflow:hidden;
}

/*post
-----------------------------------------------------------------------------------*/

.post {
overflow:hidden;
width:800px;
}

.post h3 {
margin:0;
padding:0;
font-size:18px;
font-weight:lighter;
margin:20px 0 0 20px;
}

.post h3 a,.post h3 a:visited,.post h3 strong {
display:block;
}

.post h3 strong,.post h3 a:hover {
color:#539de8;
}

.post-body {
padding:20px 20px 0;
}

.comment-link {
color:#5b6065;
margin:0 0 10px 185px;
float:right;
bottom:10px;
position:absolute;
background:url(http://i474.photobucket.com/albums/rr109/coolwebbies/Premium/CommentIcon.png);
font-size:10px;
text-align:center;
width:31px;
height:22px;
}

.post-body blockquote {
}

.post blockquote {
font-style:italic;
font-size:13px;
padding:10px 20px;
}

.post blockquote p {
}

.post img {
}

.post-meta {
padding:0 0 0 20px;
background:#1C242E;
margin-top:40px;
border:1px solid #273444;
border-right:0;
border-left:0;
}

.post-labels {
padding:0 0 0 20px;
}

/*comments
-----------------------------------------------------------------------------------*/

#comments {
padding-left:18px;
padding-right:18px;
margin-top:50px;
}

#comments h4 {
font-size:13px;
border-top:1px solid #202832;
padding-top:10px;
}

#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
padding-left:20px;
}

#comments-block .comment-author {
margin:.5em 0;
margin-top:25px;
}

#comments-block .comment-body {
margin:.25em 0 0;
}

#comments-block .comment-footer {
margin:-.25em 0 2em;
line-height:1.4em;
text-transform:uppercase;
letter-spacing:.1em;
}

#comments-block .comment-body p {
margin:0 0 .75em;
}

.deleted-comment {
font-style:italic;
color:gray;
}

#blog-pager-newer-link {
float:left;
}

#blog-pager-older-link {
float:right;
}

#blog-pager {
text-align:center;
padding:0px 20px 40px 20px; 
}

#blog-pager-older-link,#blog-pager-newer-link {
background:#1C242E;
padding:2px 8px;
border:1px solid #273444;
}

.feed-links {
display:none;
}



/*sidebar content
-----------------------------------------------------------------------------------*/

#sidebar-right {
width:218px;
float:left;
margin-left:4px;
}

#sidebar-left {
width:218px;
float:left;
}

#sidebar-bottom {
width:441px;
float:left;
}

.sidebar h2,.footer h2 {
background:#1C242E;
border:1px solid #273444;
font-size:13px;
padding:3px 0 3px 20px;
border-left:0;
border-right:0;
}

.sidebar {
font-size:13px;
}

.sidebar ul {
list-style:none;
margin:0;
padding:0;
}

.sidebar li {
line-height:1.8em;
}

.sidebar .widget-content {
padding:10px 0 10px 20px;
}

.sidebar .widget {
background:#1A1E27;
border:1px solid #10151C;
margin-bottom:5px;
}

/*footer-wrapper
-----------------------------------------------------------------------------------*/

#footer-wrapper {
overflow:hidden;
width:980px;
background:#1A1E27;
border:1px solid #10151C;
clear:both;
}

.footer .widget {
width:221px;
float:left;
padding:20px 0 0 20px;
font-size:13px;
}

.footer .widget-content {
padding:10px 0 0;
}

#footer li {
list-style:none;
line-height:1.8em;
}

#credits {
border:1px solid #10151C;
clear:both;
width:980px;
height:25px;
font-size:10px;
color:#97a3a9;
background:#0c0f12;
}

#credits_left {
float:left;
padding-left:20px;
}

#credits_right {
float:right;
padding-right:20px;
}

#credits a {
color:#539DE8;
text-decoration:none;
font-size:10px;
outline:none;
}


]]></b:skin>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>

/*homepage styles
-----------------------------------------------------------------------------------*/

#main-wrapper {
float:left;
margin:0;
background:none;
overflow:hidden;
border:0;
width:538px;
}

.post {
background:url(http://i474.photobucket.com/albums/rr109/coolwebbies/Premium/postbg.jpg);
background-repeat:no-repeat;
width:250px;
height:247px;
margin:0;
padding:10px 0 0 18px;
border:0;
display:inline;
float:left;
overflow:hidden;
position:relative;
}

.post h3 {
padding-bottom:8px;
font-family:arial;
font-size:10px;
font-weight:normal;
bottom:15px;
color:#5b6065;
text-transform:uppercase;
margin:0;
position:absolute;
}

.post-body {
overflow:hidden;
width:213px;
height:168px;
padding:0;
margin:21px 0 0;
}

.post img {
height:168px;
width:213px;
}

</style>
</b:if>

  </head>

<body>
  <div id='outer-wrapper'>

    <!-- skip links for text browsers -->
    <span id='skiplinks' style='display:none;'>
    <a href='#main'>skip to main </a> |
    <a href='#sidebar'>skip to sidebar</a>
    </span>

    <div id='header-wrapper'>
        <div id='head-inner'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Douglas Assis (Cabeçalho)' type='Header'/>
</b:section>
    </div>
        <div id='r_head'>
        <b:section class='header' id='header2' preferred='yes'/>
        </div>
    </div> 

    <div class='menu'>
                <li><a class='home' expr:href='data:blog.homepageUrl'>
Home</a></li>
            
    </div>

            <div id='content-wrapper'>

    <div id='main-wrapper'>
    <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Postagens no blog' type='Blog'/>
</b:section>
    </div>
                    
       <div id='sidebar-wrapper'>

        

    <div id='sidebar-left'>
        <b:section class='sidebar' id='sidebarl' preferred='yes'>
<b:widget id='Feed1' locked='false' title='BloggerThemes' type='Feed'/>
</b:section>
    </div>

    <div id='sidebar-right'>
    <b:section class='sidebar' id='sidebarr' preferred='yes'>
<b:widget id='Label1' locked='false' title='Labels' type='Label'/>
</b:section>
    </div>

<div id='sidebar-bottom'>
    <b:section class='sidebar' id='sidebarb' preferred='yes'/>
    </div>

    </div>

 <!-- spacer for skins that want sidebar and main to be the same height-->
<div class='clear'> </div>

</div> <!-- end content-wrapper -->

    <div id='footer-wrapper'>
        <b:section class='footer' id='footer' showaddelement='yes'>
<b:widget id='Profile1' locked='false' title='Quem sou eu' type='Profile'/>
</b:section>
    </div>

 <!--
MyShowcase blogger theme comes under a Creative Commons license.
They are free of charge to use as a theme for your blog and 
you can make changes to the templates to suit your needs. 
and please you must keep the footer credit links intact which 
provides credit to its authors.
-->


    <div id='credits'>
        <div id='credits_left'>
Copyright 2009 <a expr:href='data:blog.homepageUrl'><data:blog.title/></a>
</div>                    
        <div id='credits_right'>
Design by <a href='http://www.BloggerThemes.net' title='Bloggerthemes'>BloggerThemes</a>
        </div>
        </div>
            </div> <!-- end outer-wrapper -->
</body>
</html>

Editado Abril 13, 2011 por *FIT*
Adicionar as tags [code]

MrMALJ · Abril 13, 2011

Fera você postou sua dúvida na seção de Access, creio que esta não seja a correta, então vou mover para uma seção mas adequada para isso.

*FIT* · Abril 13, 2011

Pesquise sobre max-width e max-height.

Em todo caso sua dúvida também não me parece ser sobre PHP, estou movendo para a área de CSS

É, deve ser difícil mesmo fazer.

(Ou então é tão fácil que ninguém acha que vale a pena responder, hehehe)

Dougs · Abril 13, 2011

Desculpa colocar na seção errada.

Foi meu primeiro post e eu ainda escrevi na pressa, por causa da necessidade de resolver isso rápido.

Foi mal =)

Dougs · Abril 15, 2011

Pesquise sobre max-width e max-height.
Em todo caso sua dúvida também não me parece ser sobre PHP, estou movendo para a área de CSS

Pesquisei sobre isso, mas não cheguei a encontrar nada para me ajudar a resolver o problema.

Simplificando um pouco a minha dúvida, acho que "só" preciso de um jeito de evitar que o thumbnail

fique distorcido.

Mas valeu =)

*FIT* · Abril 20, 2011

Usou o Max-width ao invés do width?

_Vinny_ · Abril 20, 2011

Dougs, veja sobre max-width: http://www.w3schools.com/css/pr_dim_max-width.asp

Dougs · Abril 21, 2011

Dougs, veja sobre max-width: http://www.w3schools.com/css/pr_dim_max-width.asp

Olhando esse site que você mandou, vi algumas propriedades de width/height.

Fiz isso:

.post img {

height:auto;

width:auto;

}

Tem como misturar auto com max-width?? Digo, colocar um limite para imagem, mas fazer com que ela se ajuste automaticamente, sem distorcer?

(mexer só max-width só muda o tamanho, mas continua distorcendo)

*FIT* · Abril 21, 2011

Cara, se você der um max-width, e não colocar height, a imagem vai pegar a largura maxima que você colocou, e o height vai se ajustar automaticamente de acordo com a proporção da imagem, fazendo isso ela não distorce.

Dougs · Abril 21, 2011

Cara, se você der um max-width, e não colocar height, a imagem vai pegar a largura maxima que você colocou, e o height vai se ajustar automaticamente de acordo com a proporção da imagem, fazendo isso ela não distorce.

FIT, fazendo isso a imagem continua distorcendo.

Olha aqui:

.post-body {
overflow:hidden;
max-width:213px;
padding:0;
margin:21px 0 0;
}

.post img {
max-width:213px; 
}

Desculpa insistir nisso, é que eu prefiro usar thumbnails para deixar a página principal mais leve.

Meu portfólio tem vídeo e spots, sem os thumbnails vão aparecer posts meio grandes (e pesados).

Editado Abril 22, 2011 por *FIT*
Adicionar a tag [code] *FIT*

*FIT* · Abril 22, 2011

Dougs, tem como mandar o link para que eu possa dar uma olhada na página?

Dougs · Abril 22, 2011

Dougs, tem como mandar o link para que eu possa dar uma olhada na página?

O link é esse aqui: douglasportifolio.blogspot.com

É assim que ele fica com max-width:213px;

Valeu =)

*FIT* · Abril 22, 2011

Cara, como eu tinha falado antes, não vai adiantar usar o max-width se tiver forçando o height, tira o height e deixa ele pegar automático.

Conferi seu código pela firebug e todas as imagens tem o height de 151px.

Dougs · Abril 22, 2011

Cara, como eu tinha falado antes, não vai adiantar usar o max-width se tiver forçando o height, tira o height e deixa ele pegar automático.
Conferi seu código pela firebug e todas as imagens tem o height de 151px.

Então eu não sei resolver, acabei de ver o código linha por linha e não tem nenhum 151px.

PS: o número original para height era 168px.

*FIT* · Abril 22, 2011

Provavelmente está olhando apenas o CSS, olhe no HTML, aonde a imagem é exibida.

Existe o parametro height na tag <img>

Dougs · Abril 26, 2011

Provavelmente está olhando apenas o CSS, olhe no HTML, aonde a imagem é exibida.
Existe o parametro height na tag <img>

Abri o Firebug (nunca tinha feito isso, hehe). Na busca dele encontrei o 151px, dei print:

Porém (pergunta de NOOB), como acho isso no código do blog para mudar?? Olhei linha por linha...

Outra coisa. Fazendo a mudança no firebug a imagem encaixa sem distorcer, mas descentralizada e o "read more" também:

Eu sei que isso é fácil, mas pra noob a história é outra, heheheh.

*FIT* · Abril 27, 2011

Cara, acho que com um CTRL+F você consegue encontrar esse height no meio do código.

Para centralizar tente usar a tag <center>

Dougs · Abril 27, 2011

Cara, acho que com um CTRL+F você consegue encontrar esse height no meio do código.
Para centralizar tente usar a tag <center>

Antes fosse fácil assim, hehe. Já tinha feito isso, além de olhar linha por linha.

A partir do que percebi, parece que 151px só aparece quando coloco a imagem.

Não consigo achar mais nada referente a altura do thumbnail.

Pode me mostrar aonde está no código?? E onde coloco o center?

*FIT* · Abril 27, 2011

Eu apenas vi pela firebug, não sei como está seu código, logo vai ser meio impossível eu dizer aonde está.

Desculpe, você precisa centralizar verticalmente e não horizontalmente não é?

Dougs · Abril 27, 2011

Eu apenas vi pela firebug, não sei como está seu código, logo vai ser meio impossível eu dizer aonde está.
Desculpe, você precisa centralizar verticalmente e não horizontalmente não é?

O código completo está no primeiro post do tópico.

Quanto ao alinhamento, não dá pra dizer se é horizontal ou vertical, porque depende das dimensões de cada imagem que vou postar. O que preciso é que fique no centro, quando

não ocupar todo o espaço do thumbnail.

*FIT* · Abril 28, 2011

Centralizando: http://www.tableless.com.br/centralizando-...ertical-com-css

No código acima não está, sabe se ele escreve com XML ou banco de dados, algo do tipo?

Dougs · Abril 28, 2011

Centralizando: http://www.tableless.com.br/centralizando-...ertical-com-css
No código acima não está, sabe se ele escreve com XML ou banco de dados, algo do tipo?

O tema que estou usando de base é esse: www.bloggerthemes.net/2009/10/myshowcase.html

Quando descompacto, o arquivo usado para subir pro blogger é um XML.

Dougs · Maio 3, 2011

Oi, pessoal?

Houston. We got a problem.

Entrar

Thumbnail Distorcido

Pergunta

Link para o comentário

Compartilhar em outros sites

22 respostass a esta questão

Posts Recomendados

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns