以HTML/CSS显示图像？

-1

我正在开发一个项目，并且无法为我需要的内容制定正确的代码。我需要的是有两个图像填满屏幕，但在屏幕的一半处彼此相对。所以基本上用户会看到两个图像并排占据整个屏幕。现在我的编码经验非常基础，所以我理解语法等，但我可能会错过某些词汇。所以我对HTML/CSS很熟悉，但我不确定什么是最好的方法。但我希望有人能解决我的问题！以HTML/CSS显示图像？

来源

2017-02-24 unowncoder

糊你的代码 – amansoni211

欢迎来到SO。请看[游览]。您可能还想检查[我可以询问哪些主题]（http://stackoverflow.com/help/on-topic）和[问]，以及如何创建[mcve]。发布您尝试过的代码以及收到的错误。尽可能具体，因为它会导致更好的答案。 – happymacarts

这里没有人会给你完整的解决方案。人们准备好解决你在努力中遇到的错误/挑战。不写整个代码，而不是你 – NDFA

这么多问题需要回答，屏幕有多大？应该会是静态的吗？移动优化是你想要的东西？

我会推荐使用弹性盒。

<div class="flex-container"> 
    <img src="first-pic" alt="" title=""> 
    <img src="second-pic" alt="" title=""> 
</div>

CSS会是这样的：

.flex-container{ 
     display: flex; 
     justify-content: center; 
    }

它应该帮助你ATLEAST开始;）

下一次尝试做一些事情，这样你就可以提高，而不是直接得到答案。

来源

2017-02-24 19:20:53

我不知道这是你正在寻找：如果要通过侧面图像方面，你可以浮动他们，给这样的容器中各占50％（我还包括一个100vh以适应高度，这部分是可选的）：

.screen { 
    width: 100%; 
} 

.image { 
    width: 50%; 
    float: left; 
    height: 100vh; 
} 

<div class="screen"> 
    <div> 
     <img src="http://placehold.it/350x150" class="image"> 
    </div> 
    <div> 
     <img src="http://placehold.it/350x150" class="image"> 
    </div> 
</div>

来源

2017-02-24 19:36:18 vladwoguer

哦，这工作！但是可以说每张照片的尺寸都比你的样本大吗？将它的任何截断？ – unowncoder

同样的行为，如果图像较大看[链接]（https://jsfiddle.net/vladwoguer/s8rjqhph/1/） – vladwoguer

下次在你的问题添加一些代码。我希望这有助于:) – vladwoguer

这里是一个反应的两个背景图片并排：

.area{ 
 
min-height: 100%; 
 
    display: flex; 
 
} 
 

 
.first-image{ 
 
background-color:gray; 
 
width:50%; 
 
} 
 

 
.second-image{ 
 
background-color:red; 
 
flex: 1; 
 
width:50%; 
 
} 
 
html, body { 
 
    height: 100%; 
 
}

<div class="area"> 
 

 
<div class="first-image"> 
 
</div> 
 

 
<div class="second-image"> 
 
</div> 
 

 
</div>

来源

2017-02-24 19:55:37 Nadim

这是为了颜色，但如果我们要使用实际图像？我担心的是，由于没有足够的屏幕空间，图像是否会被切断 – unowncoder

以HTML/CSS显示图像？

回答

相关问题