Suporte » Ajustando o WordPress » Tornar imagem adequadamente responsiva

  • Estou finalizando um tema no SpicePress, todavia, a imagem principal do slider central, não está sendo responsiva totalmente, pois em dispositivos móveis parte da imagem é “cortada”, então, o que devo fazer para ajustar isso?

    (se alguém, por favor, puder explicar de modo (bem) simples, já que não sou dev, agradeço).

    (para visualizar melhor, o site é http://www.pedromirandacardio.com.br)

Visualizando 13 respostas - 1 até 13 (de um total de 13)
  • Oi @albertoanetto, você fala da foto que tem as 4 pessoas, certo? Neste caso, você tem um dilema. para que a imagem não fique “cortada”, você teria que reduzí-la proporcionalmente, ou seja, ela teria que continuar uma imagem horizontal. Mas como tem um texto dentro do banner, se a imagem for proporcional, o texto não vai caber.

    Minha sugestão, é um meio termo: você pode usar CSS para deixar a imagem menos vertical, e fazer o texto ocupar menos espaço. Basta inserir o código abaixo em Personalizar > CSS personalizado (ou no CSS do seu tema, se souber como fazer isso direito):

    @media( max-width: 767px) {
    
    .slider > .item {
        max-height: 60vh;
    }
    
    .slider .format-standard {
        width: auto;
        left: 0;
        margin: 15px;
    }
    
    }

    Com isso, a imagem vai ficar menos vertical, no meu teste apareceram 2 pessoas da foto sem ficarem cortadas. Se precisar mudar a proporção, basta mudar onde está com 60vh para um valor menor.

    Oi @anyssa , primeiramente, muito obrigado pela ajuda e por se mostrar solícita!

    Estamos quase próximos de um “happy ending”.

    Usei essa linha de código:

    /*Smartphone*/
    @media (max-width:480px){
    .slider > .item{
    height: 25vh !important;
    }}
    /*Tablet*/
    @media (max-width:720px){
    .slider > .item{
    height: 45vh !important;
    }}

    No entanto, ainda falta ajusta de uma melhor maneira para smart, tem alguma sugestão?

    E novamente, meu muito obrigado!

    Esta parte do código adapta a caixa de texto para caber melhor dentro da imagem:

    .slider .format-standard {
        width: auto;
        left: 0;
        margin: 15px;
    }
    

    Você pode ajustar o valor da margem se quiser mais espaço. Se ainda assim o texto ficar para fora, aumente um pouco a altura do slider de 25vh para 30vh por exemplo.

    @anyssa essa linha que me compartilhou coloco abaixo daquela que te mostrei?

    desculpe-me pelas perguntas, é que realmente, praticamente nada sei de WP.

    inclusive, se quiser, te passo login e senha, para dar uma olhada mais claramente.

    preciso encontrar uma proporção que alinhe devidamente todos os meios.

    e de novo, muito obrigado =D

    Oi, desculpe a demora em responder. Sem problemas, normal ter dúvidas mesmo. Isso, você coloca na parte relativa ao smartphone. Seu código ficaria assim:

    
    /*Smartphone*/
    @media (max-width:480px){
    
    .slider > .item{
    height: 25vh !important;
    }
    
    .slider .format-standard {
        width: auto;
        left: 0;
        margin: 15px;
    }
    }
    
    /*Tablet*/
    @media (max-width:720px){
    .slider > .item{
    height: 45vh !important;
    }
    }

    @anyssa boa tarde, mais uma vez, muito obrigado por se mostrar solícita.

    porém, tenho bad news, a imagem ainda não está encaixando, portanto, que alteração ou o que me sugere fazer?

    fiz teste em vários dispositivos móveis e só em poucos ela se encontra normal.

    (o teste realizei pelo http://www.codeorama.com/responsive/?u=www.pedromirandacardio.com.br)

    Pode tentar mudar a unidade de medida da altura da imagem. Em vez de vh, teste com vw. Aí ficaria assim:

    .slider>.item {
        height: 45vw !important;
    }

    @anyssa tivemos progressos substanciais, fiquei feliz, duas dúvidas:

    em qual parte do código mexe na largura? (queria esticar para ambos os lados)

    e por que em alguns dispositivos móveis a configuração não é adequada?

    (em uns 3/4 que consultei pela coderama, apareceu torto)

    @anyssa boa tarde, mudei de imagem, preciso aumentar a altura, pois uma parte na parte superior está cortada, gentilmente, pode informar o que posso mudar no código?

    pra ver melhor, entre no site http://www.pedromirandacardio.com.br

    (notará uma parte acima do monitor do notebook cortada).

    @anyssa este é o código atual:

    /*Smartphone*/
    @media (max-width:480px){

    .slider > .item{
    height: 30vh !important;
    }

    .slider .format-standard {
    width: auto;
    left: 0;
    margin: 15px;
    }
    }

    /*Tablet*/
    @media (max-width:720px){
    .slider > .item{
    height: 40vh !important;
    }
    }

    e preciso ajustar desktop e tablet, pois ambos estão com a imagem cortada, que ajuste me sugere?

    Obrigado desde já =)

    Agora só resta testar os valores do height para ver se faz alguma diferença, ou então mudar a unidade de medida, como disse na resposta anterior.

    Fora isso, não há muito o que fazer. Na verdade é completamente normal que uma imagem corte em telas menores. Normalmente são escolhidas fotos onde os elementos importantes estão mais no centro, para evitar que o corte esconda algo importante.

    @anyssa bom dia, agora o problema é outro, de telas menores acho que estou conseguindo ajustar.

    a imagem de desktop aparece cortada, em qual código ou por qual código eu consigo mexer na altura dela?

    Oi @albertoanetto

    No meu tamanho de tela não parece estar cortado. De qualquer forma, o código seria algo do tipo:

    /*Tablet*/
    @media (min-width:1200px){
       .slider > .item{
           height: 60vw; !important;
       }
    }
Visualizando 13 respostas - 1 até 13 (de um total de 13)
  • Você deve estar conectado para responder a este tópico.