HTML - Se distorsiona imagen en Slider

Estimados,

Estoy haciendo un Slider con HTML, CSS y Bootstrap,, no tengo problemas con los comandos, pero me es imposible saber colocar una imagen sin que se me distorsione o se pixele.

Primero. Uso la opción de bootstrap w-100 (width=100%) y la imagen me ocupa todo el monitor. Ademas se pixela totalmente.
Pongo w-50 y si bien mejora el tamaño, no me queda centrada y la imagen sigue pixelada.

Si uso CSS con wdth y height tambien se pixela

El problema es agrandar la imagen, no achicarla.

Agradezco cualquier ayuda!

Hola Ariel, podrías poner el código para ver? del css claro está.

Saludos.

Este es el codigo del slider.. donde dice: width="1240px" height="400px

Defino solo ese css en el html

La imagen toma las medidas, pero la imagen al no ser la medida original se pixela. Y me vuelve loco!!

<!-- SLIDER -->
<div class="container">
<div id="carouselExampleDark" class="carousel carousel-dark slide" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleDark" data-bs-slide-to="2" aria-label="Slide 3"></button>
</div>

<div class="carousel-inner">
<div class="carousel-item active" data-bs-interval="10000">
<img src="./img/Slider/photo4.jpg" class="d-block" width="1240px" height="400px" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>First slide label</h5>
<p>Some representative placeholder content for the first slide.</p>
</div>
</div>

<div class="carousel-item" data-bs-interval="2000">
<img src="./img/Slider/photo2.jpg" class="d-block" width="1240px" height="400px" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Second slide label</h5>
<p>Some representative placeholder content for the second slide.</p>
</div>
</div>

<div class="carousel-item">
<img src="./img/Slider/photo3.jpg" class="d-block" width="1240px" height="400px" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Third slide label</h5>
<p>Some representative placeholder content for the third slide.</p>
</div>
</div>


<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleDark" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
</div>
<!-- FIN DEL SLIDER -->

Hola Ariel bueno primero que nada puedes probar quitando el height y el width y luego en tu archivo de css haces algo como esto para probar.


Me comentas qué tal.

Saludos.

Muchisimas Gracias!!!!!