estoy teniendo un problema con css que no logro resolver. No es mi fuerte obviamente. Tengo una pantalla de login en ngx-admin (angular) y tengo colocada una imagen que a pantalla grande, se ve mal (Captura-mal1.PNG y Captura-mal2.PNG). Ahora bien, si abro el inspect del browser y la pantalla se achica, la imagen y los controles se ven bien (Captura-bien.jpg). No tengo muchas posibilidades de customizar esa pagina porque se hereda casi todo de ngx-admin, pero quizas se les ocurra como lo puedo solucionar. Les dejo el codigo:
<div class="container-logo">
<h1 id="title" class="title">Bienvenido a Gestor</h1>
<nb-alert *ngIf="showMessages.error && errors?.length && !submitted" outline="danger" role="alert">
<p class="alert-title"><b>¡No se pudo identificar el usuario! Verifique el usuario y la contraseña.</b></p>
</nb-alert>
<nb-alert *ngIf="showMessages.success && messages?.length && !submitted" outline="success" role="alert">
<p class="alert-title"><b>¡Bienvenido!</b></p>
</nb-alert>
<form (ngSubmit)="login()" #form="ngForm" aria-labelledby="title">
<div class="form-control-group">
<label class="col-form-label" for="input-email">Nombre de usuario:</label>
<input nbInput class="form-control"
fullWidth
[(ngModel)]="user.email"
#email="ngModel"
name="usernameOrEmail"
id="input-email"
placeholder="Nombre de usuario"
autofocus
[status]="email.dirty ? (email.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.email.required')"
[attr.aria-invalid]="email.invalid && email.touched ? true : null">
<ng-container *ngIf="email.invalid && email.touched">
<p class="error-message" *ngIf="email.errors?.required">
¡El nombre de usuario es obligatorio!
</p>
</ng-container>
</div>
<div class="form-control-group">
<label class=" col-form-label" for="input-password">Contraseña:</label>
<input nbInput class="form-control"
fullWidth
[(ngModel)]="user.password"
#password="ngModel"
name="password"
type="password"
id="input-password"
placeholder="Contraseña"
[status]="password.dirty ? (password.invalid ? 'danger' : 'success') : ''"
[required]="getConfigValue('forms.validation.password.required')"
[minlength]="getConfigValue('forms.validation.password.minLength')"
[maxlength]="getConfigValue('forms.validation.password.maxLength')"
[attr.aria-invalid]="password.invalid && password.touched ? true : null">
<ng-container *ngIf="password.invalid && password.touched ">
<p class="error-message" *ngIf="password.errors?.required">
¡La contraseña es obligatoria!
</p>
<p class="error-message" *ngIf="(password.errors?.minlength || password.errors?.maxlength)">
La Contraseña debería contener
de {{ getConfigValue('forms.validation.password.minLength') }}
a {{ getConfigValue('forms.validation.password.maxLength') }}
caracteres
</p>
</ng-container>
</div>
<button nbButton class="btn btn-claro"
fullWidth
status="success"
[disabled]="submitted || !form.valid"
[class.btn-pulse]="submitted">
Ingresar
</button>
<section class="another-action" aria-label="Register">¿Olvidaste tu usuario y/o contraseña?
<a class="text-link" (click)="forgotPassword()">Reestablecer</a>
</section>
</form>
</div>
y el codigo css que yo agregué es el siguiente:
::ng-deep .title-gestor {
text-align: left;
}
::ng-deep nb-auth-block {
background-image: url(../../../../assets/images/back-6-claro.png);
background-size: cover !important;
background-repeat: no-repeat;
background-position: center center;
text-shadow: 0.5px 0.5px white;
max-width: 100% !important;
max-height: 100% !important;
display: inline !important;
margin: unset !important;
}
::ng-deep .container-logo {
margin-left: 300px;
width: 400px;
margin-top: 10px;
}
el resto del codigo css es heredado y mucho no puedo tocar!. Como podría hacer que básicamente la imagen se resizee y mantenga el aspecto en casi cualquier resolucion (desde 1024 en adelante) y que los controles de login permanezcan en el centro?. Gracias de antemano. Esta es la captura que se vé bien: