Question

正如你们许多人所说，我对CSS很新，以及它是如何工作的，而且在我尝试构建网站时，我想使用这个图像http://cdn-production.codecademy.com/assets/imac-1de402798fb7b26c5952ffb70fc9ee89.svg并在里面放一张图片它的

最终产品看起来像http://gyazo.com/1e8ea4b5a65241fb5c789ad177cef20c

如何让图像适合另一张图像？

Answer 1

将一个图像用作background:到css，将其他图像用作<img />标记。

Here is demo for it.

确保图像标记按比例放置，因此不会拉伸。 HTML

<div class="outer">
  <img src="http://www.designsnext.com/wp-content/uploads/2014/04/nature-wallpapers-17.jpg" alt="" />
</div>

CSS

.outer {
  background: url(http://cdn-production.codecademy.com/assets/imac-1de402798fb7b26c5952ffb70fc9ee89.svg) 0 0 no-repeat;
  height: 740px;
  width: 910px;
  padding: 38px 0 0 39px;
}

.outer img {
  width: 823px;
  height: 469px
}

Answer 2

或许这样的事情？

http://jsfiddle.net/mukilr/MDC2s/2/

您可以使用名为absolute的CSS定位属性来执行此操作。

我使用的代码是这样的：

<div id='A'>
       <img style='position:absolute'src='http://cdn-production.codecademy.com/assets/imac-1de402798fb7b26c5952ffb70fc9ee89.svg'></img>
       <img style='position:absolute;height:450px;width:800px;top:50px;left:50px;z-index:999' src='http://www.mrwallpaper.com/wallpapers/Windows-Broken-1440x900.jpg'></img>
</div>

使用绝对定位属性时，元素相对于其父html节点定位。在这里，我们将两个图像相对于其父<div>定位。这很重要，因为这样可以将两个图像对齐在同一区域。

为确保第二张图像显示在第一张图像上方，您可以为图像提供更高的z-index属性，该属性应高于另一张。

Answer 3

使用此代码..

HTML

<span class="mac">
    <span class="screen">
        <img src="http://th06.deviantart.net/fs71/PRE/i/2011/133/a/0/mac_desktop_xd_screenshot___by_ferxho0-d3g8qer.png"/>
    </span>
</span>

CSS

span.mac{
width:450px;
height:371px;
display:inline-block;
background-image:url(http://cdn-production.codecademy.com/assets/imac-1de402798fb7b26c5952ffb70fc9ee89.svg);
background-size: 450px 371px;
}
span.mac span.screen{
width:412px;
height:235px;
display:inline-block;
margin:19px;
overflow:hidden;
}
span.mac span.screen img{
width:100%;
min-height:100%;
}
span.mac span.screen img.fit{
height:100%;
}

请记住，图像宽度适合屏幕，
如果图像高度小于屏幕高度，图像高度将适合屏幕否则平衡部分图像将进入屏幕内..

像这样： http://jsfiddle.net/kKaw4/

如果你想要适合图像高度..
请为img添加“适合”类别像这样<img src="http://www.example.com/image.png" class="fit" /> 链接http://jsfiddle.net/kKaw4/1/

如何调整图像大小以适合其他图像？

3 个答案:

HTML

CSS