Question

我尝试将引导程序与另一个名为imagemapster的图像地图插件一起使用。在使用插件之前，我的图像与我放置的“ center-block class”居中对齐。但是在使用图像地图插件之后，图像只是拒绝对齐中心。我尝试了其他图像地图插件，但结果相同。请帮忙！

$(document).ready(function() {
    $('img').mapster({
        fillColor: 'ff0000',
        fillOpacity: 0.3,
    });
  
});

#first{
    position:absolute;
    left: 35%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    
}

#second{
    margin-bottom: 1%;
    position:absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

#third{
    position:absolute;
    left: 65%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.carousel-inner img {
    margin: auto;
  }

#componentT, #componentF, #componentB{
    max-height:75vh;
    height:auto;
    object-fit: contain;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel='stylesheet' type="text/css" href='./components.css' />
    <link rel='stylesheet' type="text/css" href='../everything.css' />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="../jquery.metadata.min.js"></script>
    <script type="text/javascript" src="../jquery.maphilight.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../jquery.imagemapster.js"></script>
    <script type="text/javascript" src="../jquery.imagemapster.min.js"></script>
    
    <!-- <script type="text/javascript" src="../jquery.rwdImageMaps.js"></script>
    <script type="text/javascript" src="../jquery.rwdImageMaps.min.js"></script> -->
    <script src='./components.js'></script>
</head>

<body>
    <div class='logo'>
        <img id='logo' src='../cerv2_logo.png'>
        <a id='title'>Components</a>
    </div>
    <div class='header'>
        <ul class='elements'>
            <li class='header-element'>
                <a class='element-text' href='../index.html'>Home</a>
            </li>
            <li class='header-element'>
                <div class='drop'>
                    <a class='element-text' href='../components/components.html'>Components</a>
                    <div class='drop-content'>
                        <a href='../compressor/compresser.html'>Compressor</a>
                        <a href='../circuit/circuit.html'>Circuit</a>
                        <a href='../damper/damper.html'>Dampers</a>
                        <a href='../screen/screen.html'>Screen</a>
                    </div>
                </div>
            </li>
            <li class='header-element'>
                <a class='element-text' href='./cycles/cycles.html'>Cycle</a>
            </li>
            <li class='header-element'>
                <a class='element-text' href='./calculations/calculation.html'>Calculations</a>
            </li>
        </ul>
    </div>
    <div class='background'>
        <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active">
                    <button id='first'>
                        Front
                    </button>
                </li>
                <li data-target="#myCarousel" data-slide-to="1">
                    <button id='second'>
                        Top
                    </button>
                </li>
                <li data-target="#myCarousel" data-slide-to="2">
                    <button id='third'>
                        Back
                    </button>
                </li>
            </ol>
            <div class='carousel-inner'>
                <div class="item active">
                
                    <img src='../CERV_front.JPG' alt='CERV2' usemap='#mapp' id='componentF' class='center'>
                    <div class="carousel-caption">
                        
                        Front
                    </div>
                    <map name="mapp" id='map1'>
                        <area id='compresser' shape='poly' coords='163,484,161,465,180,433,218,432,260,439,270,467,269,505,262,540,232,556,184,552,161,528'
                            href='../compressor/compresser.html' >
                        <area id='circuit' href="../circuit/circuit.html" coords="186,148,281,260" shape='rect' >
                        <area id='LED' href="../screen/screen.html" coords="202,68,205,90,274,93,266,72" shape="poly" >
                        <area id="damper" href="../damper/damper.html" coords="162,277,245,372" shape="rect" >
                    </map>
                   
                </div>
                <div class="item">
                    
                    <img src='../CERV_Top.JPG' alt='CERV2' usemap='#mappp' id='componentT' class='map'>
                    <div class="carousel-caption">
                        Top
                    </div>
                    <map name="mappp" id='map1'>
                    </map>
                    
                </div>
                <div class="item">
                    
                    <img src='../CERV_back.JPG' alt='CERV2' usemap='#mapppp' id='componentB' class='map'>
                    <div class="carousel-caption">
                        Back
                    </div>
                    <map name="mapppp" id='map1'>
                    </map>
                    
                </div>
            </div>
        </div>
    </div>


</body>

</html>

如何在轮播中居中放置图像？在线尝试了所有内容，但无济于事

0 个答案: