0
私のウェブサイトのホームページで使用している画像の下部を選択する方法がわかりません。画像サイズより小さいコンテナ内に表示する画像の部分を選択する
自動的に上から順に表示されますが、表示する部分を選択したいと思います。これは画像の下側に表示されます。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="Stylesheet.css">
<title>Kilbride Classic Cuisine</title>
</head>
<body>
<div id="toplocation">
<i class="fa fa-fax"></i> (01)-8393790      
<i class="fa fa-map-marker">  Unit 10,11,12, Baldoyle Industrial Estate, Dublin 13, Ireland</a></i>
</div>
<div class="container-fluid">
<div id="menu">
<ul id="menu">
<li><a href="#Home">Home</a></li>
<li><a href="#OurProducts">Our Products</a></li>
<li><a href="#OurBrands">Our Brands</a></li>
<li><a href="Aboutpage.php">Contact Us</a></li>
</ul>
</div>
</div>
<div class="imgwrap">
<div id="img1">
</div>
</div>
CSS
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
font-family: sans-serif, arial;
}
#toplocation {
background-color: #4d4d4d;
color: White;
margin-top: 0;
margin-bottom: 0;
margin-right: 0;
margin-left: 0;
padding-top: 5px;
padding-right: 5px;
padding-bottom: 5px;
padding-left: 100px;
}
.container-fluid {
background-color: #fb0e3d;
width: 100%;
text-align: center;
margin: 0 auto;
margin-bottom: 0px;
}
/*.column{
text-align: center;
margin: 0 auto;
background-color:#b93333;
}*/
#menu {
margin: 0 auto;
display: inline-block;
list-style: none;
padding: 0;
border-top: 1 solid #ccc;
border-left: 1 solid #ccc;
border-bottom: 1 solid #000000;
}
#menu li {
float: left;
background-color: #fb0e3d;
}
#menu li a {
display: block;
border-bottom-right-radius: 0pxpx;
border-bottom-left-radius: 0pxpx;
padding: 40px;
width: 120px;
text-decoration: none;
color: white;
border-right: 1px solid #ccc;
font-weight: bold;
}
#menu li a:hover {
color: #fb0e3d;
background-color: #fff;
}
div.imgwrap {
width: 100%;
height: 350px;
max-width: MaxSize;
max-height: MaxSize;
border: 3px solid #4d4d4d;
background-image: url('quiche.jpg');
background-size: cover;
background-repeat: no-repeat;
margin: 0px;
padding: 0;
position: absolute;
}
#contact {
margin-top: 30px;
text-align: center;
font-size: 30px;
color: #fb0e3d;
font-weight: bold;
}
#imgcontainer {
width: 80%;
height: 30%;
align: center;
}
#info {
margin-left: 50px;
font-family: Arial, Helvetica, sans-serif;
}
#map {
align: right;
width: 30%;
height: 30%;
}
お客様の問題に関連するコードのみ*を含めるように質問を編集してください。 – Shaggy
あなたのコードを画像（おそらくjsfiddle – geeksal
@geeksal）と一緒に投稿すると、この問題をよりよく理解できます。 – Dylan