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

Question

I am making a theme for a friend and I can't seem to get my image to shrink to the right proportions. 我正在为朋友制作主题，但我似乎无法将自己的形象缩小到正确的比例。 My article won't fit into the div either. 我的文章也不适合div。 Live demo of site: http://blindersjournal.pancakeapps.com/indexblinders.html 网站的现场演示： http : //blindersjournal.pancakeapps.com/indexblinders.html
CSS: 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: 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

you need to do some changes: 您需要进行一些更改：

.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;
}

and now everything will fit in place. 现在一切都将就位。 Basically you have position and display issues, so you need to define the display blocks and then assign your fixed width/height or whatever with img adjusting automatically to the block 基本上，您会遇到位置和显示问题，因此您需要定义显示块，然后分配固定的宽度/高度或将img自动调整为该块的任何值

Answer 2

Given that you want the image to shrink to fit, you would give it a width of 100% . 假设您要缩小图片以使其适合，则可以将其宽度设置为100% 。

.twoimg img { width: 100%; }

Alternatively, a max-width would work too. 另外， max-width也可以。

For the difference between width:100% / max-width:100% , see this related question . 有关width:100% / max-width:100%之间的差异，请参阅此相关问题。

In terms of the article element not fitting, it is because you are giving the element .two and its child element, .twoimg both a height of 200px . 就article元素而言，不合适是因为您给元素.two及其子元素.twoimg都设置了200px的高度。 There is obviously no more space left for the article . 显然，该article没有更多的空间了。 You would need to remove the fixed height from the parent, .two . 您需要从父级.two移除固定高度。

If you want the elements to be inline, you could use the following: 如果希望元素内联，则可以使用以下命令：

.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 个解决方案

解决方案1
1 2014-09-04 23:37:49

解决方案2
0 已采纳 2014-09-04 23:26:37

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

问题描述

2 个解决方案

解决方案1 1 2014-09-04 23:37:49

解决方案2 0 已采纳 2014-09-04 23:26:37

解决方案1
1 2014-09-04 23:37:49

解决方案2
0 已采纳 2014-09-04 23:26:37