javascript - 两个问题：顶部固定标题上的图像大于标题和两个部分不是从第一个元素开始
问题描述
首要问题
设法获得固定的侧边栏和固定的标题。但问题是我在顶部固定标题上放置了 3 个图像，出于某种原因，在移动设备上它很好，但在其他分辨率上，即使图像是响应式的，它们也会变大并且不适合固定标题。
第二期
我确实设法用 javascript 制作了部分，但是当我在一个部分中向下滚动并从左侧边栏中选择另一个项目时，该部分从最后一个部分滚动的位置开始。不从该部分的第一个元素开始。此外，即使根据分辨率，我应该在页面上有 4、2 或 1 个图像，但它不起作用。
网站：https ://www.cevdetarkun.com/ho3/
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" lang="tr">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> Hakkioglu Izgara Kofte </title>
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800,900" rel="stylesheet">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.15.1/css/all.css">
<link rel="Stylesheet" href="css/style.css">
<link rel="Stylesheet" href="css/normalize.css">
</head>
<body style="overflow: hidden;">
<div id="sidebar">
<nav id="sidebar" class="active">
<ul class="list-unstyled components">
<li><a href="index.html" class="logo"><img src="images/logo.png" alt=""></a></li>
<li style="color:white;">------------------</li>
<li style="color:white;">-MENÜMÜZ-</li>
<li style="color:white;">------------------</li>
<li>
<a id=izgaralar href="#izgaralar"><span class="fas fa-shish-kebab"></span> Izgaralar</a>
</li>
<li>
<a id=pideler href="#pideler"><span class="fas fa-soup"></span> Pideler</a>
</li>
<li>
<a id=hamburgerler href="#hamburgerler"><span class="fas fa-cheeseburger"></span> Hamburgerler</a>
</li>
<li>
<a id=suluyemekler href="#suluyemekler"><span class="fas fa-salad"></span> Sulu Yemekler</a>
</li>
<li>
<a id=salatalar href="#salatalar"><span class="fas fa-salad"></span> Salatalar</a>
</li>
<li>
<a id=tatlilar href="#tatlilar"><span class="fas fa-pie"></span> Tatlilar</a>
</li>
<li style="color:white;">-----------------</li>
</ul>
</nav>
</div>
<div id="rightSideWrapper">
<div id="header">
<div class="headerrow">
<div class="headercolumn">
<a href="http://maps.google.com/?q=Büyükdere Cd. No:28/B, 34394 Şişli/İstanbul" target="_blank">
<img src="images/1.jpg" alt="" style="width:100%">
</a>
</div>
<div class="headercolumn">
<a href="tel:05322812329">
<img src="images/2.jpg" alt="" style="width:100%">
</a>
</div>
<div class="headercolumn">
<img src="images/3.jpg" alt="" style="width:100%">
</div>
</div>
<!--Main content-->
<div class="ContentBox" style="display: flex; flex-direction: column; height: 100%;">
<section id="main-content" style="flex:1; overflow-y: scroll;">
<div class="row">
<div class="column">
<div class="content">
<h2>Hosgeldiniz</h2>
<h4>Hakkioglu izgara kofte olarak sizlere en iyi hizmeti sunma icin calisiyoruz...</h4>
</div>
</div>
<div class="column">
<div class="content">
<h3>Etlerimiz</h3>
<h4>Kendi Uretimiziz olup bursadan ozel olarak getirilmektedir.</h4>
<h4>%100 dana etidir</h4>
</div>
</div>
<div class="column">
<div class="content">
<h3>Komur atesi</h3>
<h4>Urunlerimiz komur atesinde izgarada pisirilmektedir.</h4>
</div>
</div>
<div class="column">
<div class="content">
<h3>Komur atesi</h3>
<h4>Urunlerimiz komur atesinde izgarada pisirilmektedir.</h4>
</div>
</div>
</div>
</section>
<!-- IZGARALAR -->
<section id="izgaralar-content">
<div class="row">
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Izgara_kofte.jpg" alt="Izgara Kofte" style="width:100%">
<h3>Izgara Kofte</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Kasarli_Kofte.jpg" alt="" style="width:100%">
<h3>Kasarli Kofte</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/acili_kofte.jpg" alt="" style="width:100%">
<h3>Acili Kofte</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Et_Sis.jpg" alt="" style="width:100%">
<h3>Et Sis</h3>
<h4>1 porsiyon...35 TL</h4>
<h4>1.5 porsiyon...45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Antrikot.jpg" alt="" style="width:100%">
<h3>Antrikot</h3>
<h4>1 porsiyon...35 TL</h4>
<h4>1.5 porsiyon...45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/pirzola.jpg" alt="" style="width:100%">
<h3>Pirzola</h3>
<h4>1 porsiyon...35 TL</h4>
<h4>1.5 porsiyon...45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Sucuk_Izgara.jpg" alt="" style="width:100%">
<h3>Sucuk Izgara</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/tavuk_sis.jpg" alt="" style="width:100%">
<h3>Tavuk Sis</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/tavuk_pirzola.jpg" alt="" style="width:100%">
<h3>Tavuk Pirzola</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/tavuk_izgara.jpg" alt="" style="width:100%">
<h3>Tavuk Izgara</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/izgaralar/Karısık_Izgara.jpg" alt="" style="width:100%">
<h3>Karisik Izgara</h3>
<h4>1 porsiyon 35 TL</h4>
<h4>1.5 porsiyon 45 TL</h4>
</div>
</div>
</div>
</section>
<!-- PIDELER -->
<section id="pideler-content">
<div class="row">
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kasarli_Pide_v2.jpg" alt="" style="width:100%">
<h3>Kasarli</h3>
<h4>1 porsiyon 35 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kasarli_Kusbasili_Pide_V2.jpg" alt="" style="width:100%">
<h3>Kasarli Kusbasili</h3>
<h4>38 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kasarli_Sucuklu_Pide_V2.jpg" alt="" style="width:100%">
<h3>Kasarli Sucuklu</h3>
<h4>45 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kusbasili_Kapali_Pide_V2.jpg" alt="" style="width:100%">
<h3>Kusbasili Kapali</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kiymali_Pide_V2.jpg" alt="" style="width:100%">
<h3>Kiymali</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Kusbasili_Pide_V2.jpg" alt="" style="width:100%">
<h3>Kusbasili</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Full_Karisik_Pide.jpg" alt="" style="width:100%">
<h3>Full Karisik</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/Peynirli_yuvarlak.jpg" alt="" style="width:100%">
<h3>Trabzon Peynirli</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/kavurmali-yuvarlak.jpg" alt="" style="width:100%">
<h3>Kavurmali</h3>
<h4>41 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/pideler/sebzeli-yuvarlak_Pide.jpg" alt="" style="width:100%">
<h3>Sebzeli</h3>
<h4>41 TL</h4>
</div>
</div>
</div>
</section>
<!-- HAMBURGERLER -->
<section id="hamburgerler-content">
<div class="row">
<div class="column">
<div class="content">
<img src="images/urunler/hamburgerler/burger.jpg" alt="" style="width:100%">
<h3>Hakkioglu Burger</h3>
<h4>19.5 TL</h4>
</div>
</div>
<div class="column">
<div class="content">
<img src="images/urunler/hamburgerler/dubleburger.jpg" alt="" style="width:100%">
<h3>Hakkioglu Duble Burger</h3>
<h4>38 TL</h4>
</div>
</div>
</div>
</section>
</div>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/popper.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
*{
margin: 0px;
padding: 0px;
line-height: 1.5;
}
#sidebar {
/*Strictly Necessary */
position:fixed;
height: 100%;
width:80px;
margin: 0px;
/*Aesthetics*/
background: #e85d1a;
border: 7px;
}
#sidebar .active {
min-width: 80px;
max-width: 80px;
text-align: center; }
#sidebar.active ul.components li {
font-size: 13px; }
#sidebar.active ul.components li a {
padding: 4px 0; }
#sidebar.active ul.components li a span {
margin-right: 0;
display: block;
font-size: 25px;
}
#sidebar .logo {
display: block;
padding: 2px 1px;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#sidebar ul.components {
padding: 0;
-webkit-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s; }
#sidebar ul li {
font-size: 16px; }
#sidebar ul li > ul {
margin-left: 10px; }
#sidebar ul li > ul li {
font-size: 14px; }
#sidebar ul li a {
padding: 0px 30px;
display: block;
color: white;
border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
#sidebar ul li a span {
margin-right: 15px; }
#sidebar a:hover {
background-color: #ddd;
color: green;
}
/* Add a color to the active/current link */
#sidebar a.active {
background-color: #green;
color: green;
}
#rightSideWrapper {
/*Strictly Necessary */
width: calc(100% - 80px);
float: right;
/*Aesthetics*/
background: white;
}
#header {
/*Strictly Necessary */
position: fixed;
width: calc(100% - 80px);
height: 60px; /*Adjust the hight to your purposes*/
margin-left: 0px;
/*Aesthetics*/
background: #e85d1a;
border-radius: 0px;
}
/* Add a black background color to the top navigation */
.topnav {
border-radius: 3px;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 8px 4px;
text-decoration: none;
font-size: 14px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add a color to the active/current link */
.topnav a.active {
background-color: #04AA6D;
color: white;
}
/* Right-left aligned section inside the top navigation */
.topnav-right {
float: right;
}
.topnav.left {
float:left;
}
/* Center website */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
margin-bottom: 0.5rem;
font-weight: 500;
line-height: 1.2; }
h1, .h1 {
font-size: 2.5rem; }
h2, .h2 {
font-size: 2rem;
}
h3, .h3 {
font-size: 1.5rem;
display: inline;
padding: 2px;
}
h4, .h4 {
font-size: 1.25rem;
padding: 2px; }
h5, .h5 {
font-size: 1.25rem; }
h6, .h6 {
font-size: 1rem; }
hr {
margin-top: 1rem;
margin-bottom: 1rem;
border: 0;
border-top: 1px solid rgba(0, 0, 0, 0.1); }
a {
color: #007bff;
text-decoration: none;
background-color: transparent; }
a:hover {
color: #0056b3;
text-decoration: underline; }
a:not([href]):not([tabindex]) {
color: inherit;
text-decoration: none; }
a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
color: inherit;
text-decoration: none; }
a:not([href]):not([tabindex]):focus {
outline: 0; }
a {
-webkit-transition: .3s all ease;
-o-transition: .3s all ease;
transition: .3s all ease;
color: #3e64ff; }
a:hover, a:focus {
text-decoration: none !important;
outline: none !important;
-webkit-box-shadow: none;
box-shadow: none; }
li {
list-style-type: none;
}
/* Content */
.ContentBox{
margin-top: 75px; /*The height of the header*/
display: flex;
flex-flow: row wrap;
overflow: auto;
padding-left: 5px;
padding-right: 10px;
}
.content {
background-color: white;
border-radius: 4px; /* Rounded border */
box-sizing: content-box;
border: 2px solid black;
}
.row {
padding: 2px;
}
/* Add padding BETWEEN each column (if you want) */
.row,
.row > .column {
}
/* Create four equal columns that floats next to each other */
.column {
float: left;
width: 25%;
padding: 1px;
}
/* Clear floats after rows */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 900px) {
.column {
width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
}
img {
width: 50px; /* Set a small width */
}
/* Add a hover effect (blue shadow) */
img:hover {
box-shadow: 0 0 2px 1px red;
}
.logo img {
height: 60px; width: 60px;
text-decoration: none;
border: none;
}
.headerimg img {
margin-top: 1px;
height: 57px; width: 100%;
border-radius: 0px;
}
.haritaimg img {
margin-top: 1px;
height: 600px; width: 600px;
border-radius: 1px;
}
{
box-sizing: border-box;
}
.headercolumn {
float: left;
width: 33.33%;
}
/* Clearfix (clear floats) */
.headerrow::after {
content: "";
clear: both;
display: table;
}
JavaScript
每个部分都有自己的显示隐藏
$("#icecekler").click(function(){
$("#main-content").hide()
$("#izgaralar-content").hide()
$("#pideler-content").hide()
$("#hamburgerler-content").hide()
$("#suluyemekler-content").hide()
$("#salatalar-content").hide()
$("#tatlilar-content").hide()
$("#icecekler-content").show()
$("#hakkimizda-content").hide()
$("#iletisim-content").hide()
$("#harita-content").hide()
$("#calisma-content").hide()
})
解决方案
- 您必须定义最大高度并将宽度设置为“自动”，以便这些图像将根据高度进行响应。
（首先删除内部样式宽度：100%；在 <img 元素内部并使类看起来像这样：）
https://www.w3schools.com/howto/howto_css_image_responsive.asp
.img {
max-height: 60px;
width: auto;
}
也尝试使用 flexbox 而不是静态百分比定义（33% 宽度等）...试试这个：
.headerrow {
display: flex;
}
.headercolumn {
flex-grow: 1; // eventual
}
推荐阅读
- ios - 如何以编程方式用 UIView 替换 UILabel
- python - libpqcrypto python 实现
- c++ - 阻止用户的某些输入
- javascript - 将 Node.js 嵌入到 C 应用程序中（用于纯数据）
- react-native - 反应导航 - BottomTabsNavigator 中的 StacksNavigators
- types - a 这里的类型是什么
- apache-kafka - 卡夫卡消费者线程无限期订阅 - ReactiveKafkaConsumerTemplate
- python - 使用 etree 解析 xml 时无法返回子值
- c++ - 如何修复 Unicode/多字节兼容性问题
- java - 将 FormData 对象读入 Java HTTP 触发的 Azure Functions