Question

尝试重建Pixar网站的一部分，因为徽标有问题。有没有办法在CSS中调整图像大小？或者我是否必须在Photoshop中调整图像大小并以这种方式添加？

HTML CODE：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
    <title>Pixar Mock Up</title>
</head>

<body>
    <header>
        <div class="logo logo-size"></div>
        <nav class="nav">
            <ul>
                <li><a href="#">FEATURE FILMS</a></li>
                <li><a href="#">SHORT FILMS</a></li>
                <li><a href="#">CAREERS</a></li>
                <li><a href="#">EXTRAS</a></li>
                <li><a href="#">TECHNOLOGY</a></li>
                <li><a href="#">ABOUT</a></li>
        </nav>
    </header>

    <main>
        <div class="hero hero-size"> 
            <div class="hero-text">
                <h2>FEATURE FILMS</h2>
            </div>
        </div>

    <div class="films">
        <div class="posters">
            <img src="images/incredibles2.jpg"alt="The Incredibles">
            <p class="poster1">The Incredibles</p>
        </div>

        <div class="posters">
            <img src="images/coco.jpg" alt="Coco">
            <p class="poster2">Coco</p>
        </div>

        <div class="posters">

            <img src="images/cars.jpg" alt="Cars3">
            <p class="poster3">Cars</p>
        </div>
    </div>      

    <div class="posters">
        <img src="images/dory.jpg"alt="Finding Dory">
        <p class="poster1">Finding Dory</p>
    </div>

    <div class="posters">
        <img src="images/dino.jpg" alt="The Good Dinosaur">
        <p class="poster2">The Good Dinosaur</p>
    </div>

    <div class="posters">
        <img src="images/inside.jpg" alt="Inside Out">
        <p class="poster3">Inside Out</p>
    </div>


    </main>
</body>


</html>

CSS代码：

body {
    max-width: 1700px;
    min-width: 700px;
    background-color: white;
    padding: 0px;
    margin: 0px;
}
.logo {
    margin: 25px 80px;
    background: url('../logo/logo.jpg') left no-repeat;
}

.logo-size{
    width: 170px;
    height: 51px;
}

.hero {
    background: url('../hero/hero.jpg');
    background-position: center;
    background-repeat: no-repeat;
}

.hero-size {
    height: 550px;
    width: 100%;
}

.hero-text {
    font-size: 42px;
    color: white;
    float: left;
    position: relative;
    top: 175px;
    left: 500px;
    letter-spacing: 4px;

}

.nav li {
    display: inline;
}

.nav ul {
    margin: 0px 100px;
}

.nav a {
    color: black;
    position: fixed;
    position: relative;
    bottom: 61px;
    float: right;
    padding-right: 30px;
    text-decoration: none;
}



.posters {
    text-align: center;
    padding: 0px;
    float: right;
    display: block;
    width: 30%;
    position: relative;
    right: 80px;
    margin: 80px 0px;
}

.posters img{
    height: 275px;
    width: 200px;
}

The Size/Width I want

The Full Image

总而言之，我试图让第二个链接中找到的图像适合第一个图像中定义的宽度（宽度设置为170px）。我已经尝试将其设置为'width：auto'，但这不起作用。

Answer 1

如果您使用img代替带有徽标背景的div会更好，您将拥有更多控制权，

<img src="../logo/logo.jpg" />

但如果您必须使用div，请将background-size:cover添加到.logo

https://www.w3schools.com/cssref/css3_pr_background-size.asp

CSS |调整图像大小而不删除任何内容

1 个答案: