Question

所以基本上，我的图像背景比实际图像更强。当我尝试对它们做一些事情，比如放大或扭曲它们时，图像的背景（不是实际的图像）会超出网页边界。这是一个例子，来自.smPicsContainer。

如您所见，绿线是BMW徽标的背景。我的问题是，有没有办法调整背景大小以匹配实际图像（宝马标志）。这是我到目前为止所没有的：

index.html
<!DOCTYPE html>
<html>
    <head>
        <title>Cars</title>
        <link href="styles/index.css" rel="stylesheet" type="text/css" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

    </head>
    <body class="body">
    <header class ="navbar">
        <div class="container">
            <nav class="navbar navbar-inverse">
              <div class="container-fluid">
                <div class="navbar-header">
                    <a class="navbar-brand" href="#">
                        <img class="logoIMG" alt="Brand" src="images/brand.png">
                    </a>
                    </div>
                    <div class="navMenu">
                        <ul class="menuItems">
                            <li><a href="#">Cunt</a></li>
                            <li><a href="#">Noob</a></li>
                            <li><a href="#">Butt</a></li>
                            <li><a href="#">GoBack</a></li>
                        </ul>
                    </div>
              </div>
            </nav>
        </div>
    </header>
    <div class="content">
        <!-- big pics-->
        <div class="picsContainer" id="cont">
            <ul class="pics">
                <li class="pic01" id="pic1"><img src="images\bmw3.jpg" alt=""></li>
                <li class="pic02" id="pic2"><img src="images\audi2.jpg" alt=""></li>
                <li class="pic03" id="pic3"><img src="images\porsche2.jpg" alt=""></li>
            </ul>
        </div>
        <!-- small pics-->
        <div class="smPicsContainer">
            <ul class="smPics">
                <li class="smPic1" id="pic4"><img src="images\BMWlogo2.png" alt=""></li>
                <li class="smPic2" id="pic5"><img src="images\audiLogo.png" alt=""></li>
                <li class="smPic3" id="pic6"><img src="images\porscheLogo.png" alt=""></li>
            </ul>
        </div>
    </div>

    <script src="jquery\jquery.js"></script>

    <script>

        $(function() {

            $('#pic1').mouseenter(function() {
                $('#pic1').css("cursor", "pointer");
                $('#pic1').fadeTo("fast", 0.5);
                $('#pic4').animate({width: "40%", height: "40%"}, 'fast')
            });

            $('#pic1').mouseleave(function() {
                $('#pic1').css("cursor", "pointer");
                $('#pic1').fadeTo("fast", 1);
                $('#pic4').css("cursor", "pointer");
                $('#pic4').animate({width: "28%", height: "28%"}, 'fast')
            });

            $('#pic2').mouseenter(function() {
                $('#pic2').css("cursor", "pointer");
                $('#pic2').fadeTo("fast", 0.5);
                $('#pic5').animate({width: "50%", height: "50%"}, 'fast')
            });

            $('#pic2').mouseleave(function() {
                $('#pic2').css("cursor", "pointer");
                $('#pic2').fadeTo("fast", 1);
                $('#pic5').css("cursor", "pointer");
                $('#pic5').animate({width: "28%", height: "28%"}, 'fast')
            });

            $('#pic3').mouseenter(function() {
                $('#pic3').css("cursor", "pointer");
                $('#pic3').fadeTo("fast", 0.5);
                $('#pic6').animate({width: "50%", height: "50%"}, 'fast')
            });

            $('#pic3').mouseleave(function() {
                $('#pic3').css("cursor", "pointer");
                $('#pic3').fadeTo("fast", 1);
                $('#pic6').css("cursor", "pointer");
                $('#pic6').animate({width: "28%", height: "28%"}, 'fast')
            });
        });


    </script>
    </body>
</html>

styles.css的

body{

    background: linear-gradient(rgba(26, 26, 26, 0.7), rgba(26, 26, 26, 0.7)), url('../images/bgrIMG.jpg') no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    margin: 0;    
}

header {

    width: auto;
    margin: 0;
}

#bg {

    background:url('../images/bgrIMG.jpg') no-repeat center center;
    height: 500px;
}
.navbar {
    width: auto;
    min-height: 50px;
    min-width: 150px;
    margin-bottom: 20px;
    border: 1px solid transparent;
    margin: 0;
}

.navbar-inverse {
  background-color: #222;
  border-color: #080808;
}

.navbar-inverse .navbar-brand {
  color: #858585;
}

.container-fluid {

  padding-right: 0px;
  padding-left: 0px;
  margin-right: auto;
  margin-left: auto;

}

.navbar-header {
    margin: 0;
    background: white;
}

.navbar-brand {

  float: left;
  height: 10px;
  padding: 10px;
}

.navbar-brand .logoIMG {

    float: left;
    position: absolute;
    top: 0.6%;
    padding: 0;
    height: auto;
}

.logoIMG:hover {

    transition: all 1s ease;
    transform:scale(1.25);
}
.navMenu {

    float: right;
}

.navMenu .menuItems {

    font-family: BebasBold;
    margin: 0;
    line-height: 48px;
}

.menuItems a {

    text-decoration: none;
    font-size: 25px;
    color: #444;
    display: block;
    padding: 0px;
    margin: 0  20px;

}

.menuItems li {

    display: inline-block;
    text-transform: uppercase;
    margin: 0 20px;
    transition: background 0.2s;

}

.menuItems li:hover {

    transition: all 0.3s ease;
    border-bottom: solid #321DF2;
}

.menuItems a:hover {

    transition: all 0.3s ease;
    color: #999;
}

.content {
    width: 100%;
    min-width: 5%;
}

.content .picsContainer {
    height: 20%;
    position: relative;
    background: black;
}

.content #cont {
    width: 100%;
    height: 200px;

}

.content #cont .pics{
    display:inline-block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.content #cont .pic01 {
    float: left;
    position: absolute;
    list-style-type: none;
    width: 33.3%;
    height: 100%;
}

.content #cont .pic02 {
    float: left;
    position: absolute;
    list-style-type: none;
    width: 33.3%;
    left: 33.3%;
    height: 100%;
}

.content #cont .pic03 {
    float: right;
    position: absolute;
    list-style-type: none;
    width: 33.3%;
    left:66.6%;
    height: 100%;
}

.content .picsContainer img {

    width: 100%;
}

.content .smPicsContainer {
    margin: 0 auto;
    position: absolute;
    height: 50px;
    width: 100%;
    top: 4.5%;

}


.content .smPicsContainer .smPic1 {

    background-size: cover;
    wight: 10%;
    position: absolute;
    display: block;
    float: left;
    list-style-type: none;
    padding: 0;

}

.content .smPic2 {

    position: absolute;
    float: left;
    left: 35%;
    list-style-type: none;

}

.content .smPic3 {

    position: absolute;
    display: block;
    float: left;
    list-style-type: none;
    left: 70%;

}

.content .smPicsContainer img{

    width: 15%;
}

@font-face {

    font-family: 'BebasBold';
    font-weight: bold;
    src: url("../fonts/BebasNeue Bold.otf");

}

@media only screen and (min-width: 150px) and (max-width: 600px){

    .navbar {

    min-height: 230px;

}

    .navbar-brand img {

    display: none;
}

    .navMenu .menuItems {

    height: 172px;
}


    .menuItems li {
        width: 100%;
        top: 0.1%;
        display: block;
        text-align: center;
        float: right;
    }

.content #cont .pic {
    float: left;
    list-style-type: none;
    width: 100%;
    height: 300px;
}

}

如果需要，我会提供更多信息。请记住，我对网络开发很陌生。提前感谢您的时间。

Answer 1

首先 - 如果你想给你的容器一个风格，绝对而不是它里面的图像。

.navbar-brand {
display:inline-block;
}

这会将容器的大小调整为内容的大小。

图像的背景比实际图像大

1 个答案: