0

Estou tentando ajustar uma imagem com borda dentro da tabela, mas ao redimensionar a janela e ao passar o mouse aparece uma linha de pixel na vertical no lado direito da imagem. Tentei corrigir removendo margem e espaçamento na div, imagem, tabela etc mas a linha continua aparecendo Não sei como faço para que essa linha desapareça

HTML abaixo

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link href="newcss.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        <nav id="item">
            <div class="table"><!-- tabela -->
                <div class="tr"><!-- linha -->
                    <div class="td"><!-- celula -->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                    <div class="td"><!--celula-->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                    <div class="td"><!--celula-->
                        <a href="mapas/" target="_blank"><!-- imagem principal -->
                            <div class="opacidade">
                                <img src="icone.png" class="imagem" title="" ><!-- icone -->
                            </div>
                            <p class="sub-titulo">Descreve sobre a imagem</p><!-- subtitulo da imagem -->
                        </a>
                    </div>
                </div>
            </div>
        </nav>
    </body>
</html>

CSS abaixo

@charset "utf-8";

body{
    font-family: fonteTrebuchet;
    color: #333;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
}
nav#item .table {
    padding: 0px;
    margin: 20px auto 20px auto;
    width: 100%;
    display: table;
}
nav#item .tr {
    display: table-row;
}
nav#item .td {
    text-align: center;
    padding: 4px;
    margin: 0px;
    width: 33%;
    display: table-cell;
}
nav#item a{
    padding: 0px;
    margin: 0px;
}
nav#item div.opacidade{
    background: #111;
    padding: 0px;
    display: inline-block;
}
nav#item div.opacidade:hover img.imagem {
    border: solid 1px #d1d1d1;
    opacity: 0.7;
}
nav#item div.opacidade img.imagem {
    border: solid 1px #ddd;
    width: auto;
    display: block;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
}
nav#item .imagem{
    width: auto;
    max-width: 100%;
}
nav#item .sub-titulo{
    font-size: small;
    padding: 0;
    margin: 10px 0px 0px 0px;
}
1
  • Andrei, vc já fez 10 perguntas, e nenhuma delas você marcou uma resposta como a melhor. Os usuários voluntariamente dedicam um tempo para tentar te ajudar com respostas, logo o mínimo que se espera da sua parte é que recompense os usuários pelo esforço.
    – Sam
    10/05/2019 às 15:46

1 Resposta 1

0

As imagens com as bordas está ultrapassando 2 pixels na largura da div.opacidade, fazendo com que, no efeito de transparência, o fundo preto, do contêiner, não "cubra" toda a imagem, ou seja, 2 pixels à direita da imagem está fora do fundo preto, formando uma "linha vertical" (na verdade 2 pixels à direita fica com o fundo branco da página).

Você resolve isso colocando box-sizing: border-box; na imagem para que a borda fique também dentro da área do fundo preto:

nav#item div.opacidade img.imagem {
    border: solid 1px #ddd;
    width: auto;
    display: block;
    -webkit-transition: all 1s linear;
    -moz-transition: all 1s linear;
    -ms-transition: all 1s linear;
    -o-transition: all 1s linear;
    transition: all 1s linear;
    box-sizing: border-box; /* AQUI! */
}

Saiba mais sobre o box-sizing no MDN.

Com box-sizing:

Veja que a imagem se encaixa perfeitamente no contêiner.

inserir a descrição da imagem aqui

Sem box-sizing:

A imagem extrapola (à direita) a área do contêiner por causa das bordas.

inserir a descrição da imagem aqui

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .