Tamanhos de imagem responsivos: CSS ou plugin personalizado?

Um usuário perguntou ?

Quero que os tamanhos de imagem sejam responsivos nos meus posts de blog (não nas páginas principais do meu site), especialmente para grandes imagens orientadas a retratos.

Estou usando o WordPress 4.9.5 e o tema do lado Pique (pique versão 1.4.2)

O comportamento ideal que eu quero:

– para tamanhos de tela inferiores a 500 px, exiba a imagem em questão com 100% de largura de coluna. – para tamanhos de tela superiores a 501px, exiba a imagem com 70% de largura (ou uma largura máxima de 600px – a coluna principal máxima em um tema Piqué é de 857px) – Talvez (mas imagino que preciso de um plugin para isso) clique nas imagens para vê-las em tamanho real em uma caixa de luz, se eles forem reduzidos.

Eu tentei adicionar um pouco de CSS ao tema do meu filho:

@media screen and (max-width: 500px) {
.imgv {
	width : 100% ;
}
}

@media screen and (min-width: 501px) {
.imgv {
	max-width : 600px ;
}
}

eu também tentei:

@media screen and (min-width: 501px) {
.imgv {
	max-width : 70% ;
}
}

Então eu adicionei a classe CSS “imgv” à imagem que eu queria modificar. Tentei fazer isso através do campo “Classe CSS” na caixa de diálogo de edição de imagem wysiwyg ou manualmente diretamente no código html da imagem, substituindo a classe de tamanho da imagem e também removendo a largura e altura da codificação. Em ambos os casos, o novo CSS não foi implementado e as imagens ainda são exibidas em seu tamanho total, mesmo que eu maximize a janela.

A seguir, um exemplo do código html padrão:

<img class="wp-image-3729 size-medium_large" src="https://lesbeauxebooks.com/wp-content/uploads/2018/05/certificat-768x1024.png" alt="Reproduction d'un tableau au format fluide" width="768" height="1024" /> Ceci n'est pas un tableau

As imagens em questão são 768x1024px (orientação retrato) quando definidas como “tamanho médio”, o que significa muita rolagem, mas o tamanho médio é de 225x300px, isso é muito pequeno para o que eu quero.

Posso fazer isso com CSS personalizado? Se sim, como posso alcançá-lo? Se não, você poderia recomendar um bom plugin simples? Procurei plugins de imagem responsivos, mas todos parecem ser para galerias/slides responsivos, não imagens individuais.

Infelizmente, não posso ligá-los diretamente à página porque o artigo ainda não foi publicado e prefiro não publicá-lo até que eu o edite. : Mas se mais informações forem necessárias, tentarei encontrar uma solução. O site em questão está aqui: http://lesbeauxebooks.com

Obrigado antecipadamente por qualquer ajuda que você possa fornecer.

(@macmanx)

Moderador voluntário

2 anos, 6 meses atrás

Existem plugins para isso, como https://wordpress.org/plugins/wp-retina-2x/ ou a imagem do Jetpack CDN: https://jetpack.com/support/photon/

(@zelda013)

2 anos, 6 meses atrás

Oi James, muito obrigado por sua resposta.

No entanto, não tenho certeza se esses são os plugins que estou procurando. Estou procurando uma maneira de modificar o conteúdo da imagem da página, dependendo do tamanho da tela, não uma maneira de criar imagens de alta resolução para displays de retina, que parece ser a principal característica desses plugins. A menos que tenha entendido um mal-entendido, nesse caso peço desculpas. Ou seja, eu preciso agir no CSS em vez dos arquivos de imagem.

O que eu realmente quero: – um plugin que mudará o CSS da imagem, usando perguntas de mídia ou – uma maneira de adicionar minhas próprias perguntas de mídia à SEC e garantir que elas sejam implementadas (atualmente minha SEC não parece estar incluída).

Talvez uma maneira melhor de fazer minha pergunta é:

Como posso substituir o CSS gerado que é usado para imagens importadas com a minha? Uma vez que só é eficaz para substituir classes CSS em código html.

Obrigado por sua ajuda!

(@macmanx)

Moderador voluntário

2 anos, 6 meses atrás

Estou procurando uma maneira de modificar o conteúdo da imagem na página, dependendo do tamanho da tela.

A imagem do Jetpack CDN fará exatamente isso por você, automaticamente: https://jetpack.com/support/photon/

(@zelda013)

2 anos, 6 meses atrás

Olá James, obrigado novamente pelo quebra-cabeça. Desculpe por reclamar, mas se não estou perdendo algo, não é o que eu quero.

*Eu não quero acomodar FILMES DE IMAGEM de diferentes tamanhos, dependendo do tamanho da página.

Quero fazer isso ENTER AS EXPLICAÇÕES EFETIVAS em % da largura total, dependendo do tamanho da página: 70% de largura máxima para páginas maiores, 100% de largura para páginas menores.

Normalmente eu deveria ser capaz de fazer isso com a questão da mídia, mas meu código CSS não está sendo aplicado e eu não sei por quê.

Como posso fazer o wordpress usar meu código CSS, que mostrei acima no meu primeiro post?

(@zelda013)

2 anos, 6 meses atrás

Acho que resolvi meu problema.

O artigo ainda não foi publicado, pois eu estava tentando primeiro corrigir este problema de imagem. Eu postei agora e quando verifiquei o link encontrei um erro 404. Depois de algumas pesquisas preocupantes, percebi que minha categoria “carteira” (a categoria está na URL) provavelmente entraria em conflito com o recurso wordpress “wallet” (ativado, mas não usado). Pelo menos este é o meu palpite sobre o que estava acontecendo.

Não sei por que a SEC não foi implementada antes quando era um simples seletor, como me parece que ainda deve funcionar. Agora, no entanto, a categoria foi renomeada como “projetos” em vez de “portfólio” e adicionei o seletor explícito “artigo .entry-content .imgv” e minha pergunta sobre mídia CSS parece estar funcionando agora. (No entanto, eu gostaria de poder manter a categoria de “portfólio”, é mais apropriado… bem).

Se alguém quiser ver o que quero dizer aqui é o artigo: http://lesbeauxebooks.com/projets/le-putain-d-enorme-projet/

Resolveu seu problema?

0/0

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *