Question

我正在为朋友制作一个主题，我似乎无法将我的图像缩小到正确的比例。我的文章也不适合div。网站的现场演示：http://blindersjournal.pancakeapps.com/indexblinders.html
CSS：

        .one {
    background: url("http://i.imgur.com/A2Eps8D.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 65px;
    background-attachment: fixed;
    }
    @font-face {
    font-family: Nexa;
    src: url('https://dl.dropboxusercontent.com/u/105222237/Nexa%20Bold.otf');
    }
    .navlinks li { 
    font-family: Nexa;
    font-size: 20px;
    list-style-type: none;
    margin: 0;
    padding-left: 125px;
    vertical-align: middle;
    line-height: 63px;
    display: inline;
    }
    nav img {
    float: left;
    height: 60px;
    }
    * { 
    margin: 0;
    padding: 0; 
    border: none; 
    }
    a {
    text-decoration: none;
    color: #ffffff;
    }
    .two {
    background-color: black;
    height: 200px;
    }
    .twoimg {
    height: 200px;
    width: 200px;
    }
    article {
    max-width: 500px;
    margin: 0 auto;
    }

HTML：

<head>
<link href="/normalize.css" rel="stylesheet">
<link href="/indexblinders.css" rel="stylesheet">
<title>Blinders Journal</title>
</head>
<body>
<div class="one">
    <nav>
    <img src="http://i.imgur.com/zkED7Bc.png" />
    <div class="navlinks">
        <ul>
            <li><a href="#">Submissions</a></li>
            <li><a href="#">Masthead</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Donate</a></li>
        </ul>
        </div>
        </nav>
    </div>
    <div class="two">        
    <div class="twoimg">
    <img src="http://blindersjournal.org/img/Lisa.JPG" />
    </div>
    <article>
    <h2>VHS umami pop-up trust fund</h2>
    <p>Marfa church-key kitsch bicycle rights, 8-bit mixtape cardigan gentrify Echo     Park. Street art swag brunch, next level roof party Schlitz hella organic keffiyeh      selfies. You probably haven't heard of them polaroid hashtag +1, meggings biodiesel     Portland High Life cray tumblr retro.</p>
    </article>
    </div>
        <script>
    $(document).ready(function(){
    $('section[data-type="background"]').each(function(){
    var $bgobj = $(this);

    $(window).scroll(function() {
        var yPos = -($window.scrollTop() / $bgobj.data('speed'));

        var coords = '50% '+ yPos + 'px';

        $bgobj.css({ backgroundPosition: coords });
    });
    });   
    });
    </script>
    </body>

Answer 1

你需要做一些改变：

.two {
    background-color: #000;
    height: 200px;
    display: block;
}
.twoimg {
    display:inline-block;
    height:200px width:200px;
}
.twoimg img {
    width:100%;
    height:auto;
}
article {
    display: inline-block;
    color: #FFF;
    vertical-align: top;
}

现在一切都会适合。基本上你有位置和显示问题，所以你需要定义显示块然后分配固定的宽度/高度或任何img自动调整到块

Answer 2

鉴于您希望图像缩小以适合，您可以给它宽度100%。

.twoimg img { width: 100%; }

或者，max-width也可以。

有关width:100% / max-width:100%之间的差异，请参阅此related question。

就article元素不适合而言，这是因为您给予元素.two及其子元素.twoimg两者的高度为200px。 article显然没有剩余空间了。您需要从父级.two删除固定高度。

如果您希望元素内联，可以使用以下内容：

.two {
    background-color: black;
    max-height: 200px;
    overflow: hidden;
}
.twoimg {
    float: left;
}
article {
    max-width: 500px;
    margin: 0 auto;
    color: #fff;
}

图像不会缩小到div中的200px，文章也不会在div中

2 个答案: