0

Estoy haciendo un proyecto en angular en el cual en un componente estoy haciendo una fila de imagenes, el resultado que espero es que tengan poca opacidad cuando se vean en pantallas grande pero cuando se vean en una pantalla chica (menos que md) la opacidad sea del 100% este es mi codigo html

<div class="proyects">
        <div *ngFor="let pro of proyect">
            <a [href]="pro.linkProyect" ><img [src]="pro.imgProyect "  class="imgproyect" [alt]="pro.nombreProyect"></a>
        </div>
    </div>

y este mi codigo css

.proyects{
display: flex;
justify-content: space-between;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 25%;}

.imgproyect{
 border-radius: 10px;
 margin:0 5px 2px 0;
 transition-duration: 1.1s;
 }
2
  • 2
    Lecturas recomendadas: media-queries y revisa los tamaños que usa bootstrap para establecerlos de forma similar en tus media-queries según lo que pretendas.
    – masterguru
    el 22 oct. 2022 a las 20:57
  • Esto en angular (cosa que no te recomiendo) se resuelve con @HostListener('window:resize', ['$event']), yo personalmente usaria css por que no necesitas meterte en el tema de componentes.
    – Legna
    el 24 oct. 2022 a las 14:20

1 respuesta 1

0

Con media-queries puedes hacerlo

@media (min-width: 768px) {
    .imgproyect {
        //OPACIDAD QUE DESEES
    }
}
@media (max-width: 767px) {
    .imgproyect {
        //OPACIDAD QUE DESEES
    }
}

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.