0

谷歌没有给我任何有用的东西:(

我正在寻找一种让图像具有 100% 宽度和固定高度，例如 400 像素，而不是可怕地拉伸，而不是拉伸，放大的方法？

我想我追求的东西与 backstretch 所做的没有什么不同，但不适用于全屏背景。
我认为这段视频在某些情况下显示了我所追求的（我认为鹰图片显示了我正在寻找的东西）http ://www.teehanlax.com/resources/img/story/medium/prototypes/feature-header.mp4

100% 宽度图片，这是一个固定高度，显示裁剪图像，并随浏览器缩放


。http:// /jsfiddle.net/XcYfS/2/ 

<style>
    img {
        width: 100%;
        height: 400px; }

    h1, p {
        width: 80%;
        padding-left: 10%; }
</style>

<img src="http://placekitten.com/200/300" alt="">

<h1>Interesting Title!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>
4

2 回答 2

0

为了避免失真，我认为最好使用 jQuery。

您可以为此使用jQuery Supersized插件。它是最著名的插件之一，主要用于场地覆盖 100% 宽度的网站。

这是该网站的链接 - http://buildinternet.com/project/supersized/

于 2013-04-19T11:09:33.343 回答
0

试试这个。点击这里预览

我已经编辑了您的示例代码

HTML：

<div class="wrapper">
    <img src="http://placekitten.com/200/300" alt="" />
</div>
<h1>Interesting Title!</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat magnam culpa obcaecati numquam iusto recusandae totam voluptatibus temporibus ipsum quasi. Nesciunt maiores sequi quis consectetur labore asperiores eaque hic ipsa!</p>

CSS：

div.wrapper{
    display: inline-block;
    width:500px;
    height:400px;
    border:1px solid red;
    overflow:hidden;
}

img {
    width: 100%;
    height: auto;
}

h1, p {
    width: 80%;
    padding-left: 10%; 
}

您的图像的父元素应该是display:inline-block;，宽度将是您的img.

如果你想定位图像，假设你想显示图像的中心，只需margin-top在 img 中添加一个负片。点击这里预览

img {
    width: 100%;
    height: auto;
    margin-top:-100px;
}
于 2013-04-19T11:13:12.843 回答