"Se um trabalhador quiser fazer bem o seu trabalho, ele deve primeiro afiar suas ferramentas." - Confúcio, "Os Analectos de Confúcio. Lu Linggong"
Primeira página > Programação > Você pode controlar a altura das imagens dentro dos pseudo-elementos do CSS?

Você pode controlar a altura das imagens dentro dos pseudo-elementos do CSS?

Postado em 2025-03-25
Navegar:496

Can You Control the Height of Images Inside CSS Pseudo-elements?

modificando a altura da imagem em pseudo-elementos CSS: é possível? Por padrão, o redimensionamento da imagem não é suportado diretamente com o CSS.

para alcançar a escala desejada, considere as seguintes abordagens:

1. Ajuste o background-size:

para: After pseudo-elementos, ajuste a propriedade de tamanho de fundo. No entanto, verifique se você especifica a largura e a altura do elemento de bloco que contém a imagem usando as propriedades de largura e altura.

. Pdflink: após { Imagem de fundo: url ('/imagens/pdf.png'); Antecedentes-tamanho: 10px 20px; Exibição: bloco embutido; Largura: 10px; Altura: 20px; contente:""; }

.pdflink:after {
    background-image: url('/images/pdf.png');
    background-size: 10px 20px;
    display: inline-block;
    width: 10px; 
    height: 20px;
    content:"";
}

esteja atento à compatibilidade do navegador ao usar esse método. Consulte a tabela de compatibilidade abrangente no MDN para obter mais informações. Imagem de origem de redimensionamento:

alternativamente, considere redimensionar a imagem original para o tamanho do tamanho apropriado antes de usá-la no CSS. Isso garante que a imagem seja exibida nas dimensões desejadas sem depender do escalonamento do navegador. Tag IMG inline:

Para uma abordagem mais direta, incorpore uma tag embutida ao lado da CSS pseudo-element. Essa abordagem garante que a imagem renderá no tamanho especificado, mas se desvia do objetivo inicial de minimizar a marcação.

Tutorial mais recente Mais>

Isenção de responsabilidade: Todos os recursos fornecidos são parcialmente provenientes da Internet. Se houver qualquer violação de seus direitos autorais ou outros direitos e interesses, explique os motivos detalhados e forneça prova de direitos autorais ou direitos e interesses e envie-a para o e-mail: [email protected]. Nós cuidaremos disso para você o mais rápido possível.

Copyright© 2022 湘ICP备2022001581号-3