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;
}
@HostListener('window:resize', ['$event'])
, yo personalmente usaria css por que no necesitas meterte en el tema de componentes.