我有一些html代码，当我运行它时，它显示得非常好。但是，当我将相同的代码复制到asp.net时，该网站的整体字体变小，并且轮播滑块变得丑陋。滑块中的图片变得相当失真，并且标题进一步向右移动。当我单击它时，转盘底部的3滑块指示器始终会转过身。 https://pasteboard.co/IFrM6Zo.png

这是我随html一起获得的版本，看起来更好一些，但是我的目标是asp.net，它是最新版本。 https://pasteboard.co/IFrLK8O.png

我的目标是将标题居中放置，底部还有3个漂亮的小轮播指示器。任何想法，为什么在asp，net中的图像像扭曲？它不会显示完整图像，但会显示一个非常放大的版本。我从asp.net上删除了轮播指标，但我想像使用html一样实现它。

这是我的轮播代码。

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="7000">


    <div class="carousel-inner" role="Listbox">
        <!--First slide -->
        <div class="carousel-item active" style="background-image: url(https://images.pexels.com/photos/2237797/pexels-photo-2237797.jpeg?cs=srgb&dl=computer-device-electronics-2237797.jpg&fm=jpg);">
            <div class="carousel-caption text-center">
                <h1>Welcome to Nuno</h1>
                <h3>Animated Bootstrap Theme</h3>
                <a class="btn btn-outline-light btn-lg" href="#about">Get Started</a>
            </div>
        </div>
        <!--Second slide-->
        <div class="carousel-item" style="background-image: url(https://images.pexels.com/photos/2237797/pexels-photo-2237797.jpeg?cs=srgb&dl=computer-device-electronics-2237797.jpg&fm=jpg);"></div>
        <!--Third slide-->
        <div class="carousel-item" style="background-image: url(https://images.pexels.com/photos/669228/pexels-photo-669228.jpeg?cs=srgb&dl=calendar-cellphone-computer-keyboard-669228.jpg&fm=jpg);"></div>
    </div>

    <!--Previous and next buttons -->
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    </a>

    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
    </a>
</div>

这是CSS

.carousel-item {
height: 100vh;
position: center;
 }

.carousel-item {
transition: -webkit-transform 0.5s ease;
transition: transform 0.5s ease;
transition: transform 0.5s ease,-webkit-transform 0.5s ease;
-webkit-backface-visibility: visible;
backface-visibility: visible;
 }

.carousel-caption {
position: absolute;
top: 50%;
text-transform: uppercase;
width: 100%;
right: 0;
left: 0;
transform: translateY(-50%);
 }

.carousel-caption h1 {
    font-size: 3.8rem;
    font-weight: 700;
    letter-spacing: .3rem;
    text-shadow: .1rem .1rem .8rem black;
    padding-bottom: 1rem;
 }

.carousel-caption h3 {
    font-size: 2rem;
    text-shadow: .1rem .1rem .5rem black;
    padding-bottom: 1.6rem;
 }

.btn-lg {
border-width: medium;
border-radius: 0;
font-size: 14px;
 }