html 画像の縦横比率を维持/枠に收める/薄いカバー画像を上から重ねる
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 画像の縦横比率を维持/枠に收める/薄いカバー画像を上から重ねる相关的知识，希望对你有一定的参考价值。
<!-- reset.css vue.js required -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>写真の重ね合わせ</title>
<!-- <link href="https://fonts.googleapis.com/css?family=Amatic+SC" rel="stylesheet"> -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="reset.css">
<!-- <link type="text/css" rel="stylesheet" href="css/style.css"> -->
<style>
html {
min-height: 100%;
position: relative;
}
body{
color: #333333;
}
.main{
margin-bottom: 70px;
background-color: #f6f5f4;
}
.container-fluid{
max-width: 1180px;
margin: 0 auto;
}
/* ==================================
ヘッダー部
* ================================== */
.header{
width: 100%;
height: 110px;
color: white;
background-color: rgba(10,13,44,1.0);
}
.site-title{
font-size:36px;
text-align: center;
padding: 10px 20px;
letter-spacing: 5px;
}
.menu{
display: flex;
justify-content: space-around;
align-items: center;
}
/* ==================================
コンテンツ一覧表示
* ================================== */
.hero{
height: 500px;
background-image: url('images/church-4067791_1280.jpg');
background-attachment: fixed;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
.content-list{
width: 100%;
display: flex;
display: -ms-flexbox; /* IE10 */
flex-wrap: wrap;
-ms-flex-wrap: wrap; /* IE10 */
justify-content: space-between;
margin-top: 30px;
margin-bottom: 30px;
}
.images{
border: 1px solid darkgray;
margin-bottom:10px;
margin-right:auto;
margin-left: auto;
border-radius: 5px;
}
.img-container{
position: relative;
width: 336px;
height: 280px;
margin-right:auto;
margin-left: auto;
border-radius: 5px;
}
img {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
}
.img-description{
border-top:1px solid darkgray;
height: 80px;
padding: 5px;
}
/* ==================================
フッター部
* ================================== */
footer {
bottom: 0;
width: 100%;
height: 5em;
position: absolute;
/* background-color: rgba(43,43,43,1.0); */
background-color: rgba(12,12,45,1.0);
color: white;
text-align: center;
line-height: 5em;
}
.menu-item{
font-size:20px;
text-align: center;
width: 100%;
height: 48px;
line-height: 48px;
}
.menu-link{
color: white;
text-decoration: none;
display: block;
transition:all 0.5s;
}
.menu-link:hover{
background-color: rgba(210,103,23,1.0);
transition:all 0.5s;
}
</style>
</head>
<body>
<!-- ヘッダー部 -->
<header class="header js-float-menu">
<!-- サイトタイトル -->
<h1 class="site-title"><a class="site-title-link" href="#">CANDLE</a></h1>
<!-- ナビゲーションメニュー -->
<nav class="nav-menu container-fluid">
<ul class="menu">
<li class="menu-item"><a class="menu-link" href="">HOME</a></li>
<li class="menu-item"><a class="menu-link" href="#news">About</a></li>
<li class="menu-item"><a class="menu-link" href="#about">Tips</a></li>
</ul>
</nav>
</header>
<!-- メイン部 -->
<main class="main">
<div class="hero"></div>
<div class="container-fluid">
<div id="app">
<h2 style="font-size: 26px;text-align:center; margin-top: 30px">写真を選んで「タッチ」すれば、物語が見えてきます</h2>
<!-- コンテンツ一覧 -->
<section class="content-list">
<div class="images" v-for="imageData in imageDatas">
<!-- 画像 -->
<div class="img-container"><img :src="imageData.url" /></div>
<!-- 説明 -->
<div class="img-description">
勉強するぐらいの力が必要である。
</div>
</div>
</section>
</div>
</div>
</main>
<!-- フッター部 -->
<footer class="footer">
Copyright CANDLE
</footer>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data: {
imageDatas:[
{title:'お花フィルム',comment:'写真のフィルムです', url:'images/film-4068415_1920.jpg',username:'yamada'},
{title:'赤ちゃん',comment:'お昼寝中です' , url:'images/newborn-2553566_1920.jpg',username:'kinosita'},
{title:'早朝',comment:'朝は気持ちいですね' , url:'images/sunset-3292911_1920.jpg',username:'utida'},
{title:'カップル',comment:'運動してません' , url:'images/couple-2158309_1280.jpg',username:'kuriyama'},
{title:'カップル',comment:'運動してません' , url:'images/couple-2158309_1280.jpg',username:'kuriyama'},
{title:'赤ちゃん',comment:'お昼寝中です' , url:'images/newborn-2553566_1920.jpg',username:'kinosita'},
{title:'お花フィルム',comment:'写真のフィルムです', url:'images/film-4068415_1920.jpg',username:'yamada'},
{title:'お花フィルム',comment:'写真のフィルムです', url:'images/film-4068415_1920.jpg',username:'yamada'},
]
}
});
</script>
<!-- 参考記事
・扱いやすいレスポンシブでの横並びの方法。2018年からはこれでOK!
https://design-tera.com/blog/archives/2372/
・固定サイズの親要素に、同じ幅の複数ボックスを同じcssで並べる
https://nakazilab.com/boxes-lining/
http://shanabrian.com/web/css3/flex-justify-content.php
-->
</body>
</html>以上是关于html 画像の縦横比率を维持/枠に收める/薄いカバー画像を上から重ねる的主要内容，如果未能解决你的问题，请参考以下文章