我在html中有以下代码:
.class4{
height: 650px; background-color: SlateGrey; padding-top: 8px;padding-left: 20px;
}
h1.b{
text-align: center;
color:white;
font-weight: bold;
font-family:Segoe WP Semibold
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid class4">
<br><br><br><br>
<h1 class="b" id="ABOUT">ABOUT</h1><hr width="87%">
<br><br>
<div class="container">
<div class="row" >
<div class="col-xs-6 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>
Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
</div>
<div class="col-xs-6 col-md-6 ">
<img src="C:/Users/user/Desktop/images/7.jpg" alt="image">
</div>
</div>
</div>
</div>
</body>
</html>
此代码在笔记本电脑屏幕的背景上显示文本和图像:左侧为文本,右侧为图像
问题是当我inspect
在移动设备上查看结果时,背景无法覆盖整个宽度,并且图像的很大一部分似乎不在背景中
如何避免这个问题?
答案 0 :(得分:1)
我认为您只需将img宽度设置为100%
。由于您使用的是引导程序,因此可以将class="w-100"
添加到img中。
.class4 {
height: 650px;
background-color: SlateGrey;
padding-top: 8px;
padding-left: 20px;
}
h1.b {
text-align: center;
color: white;
font-weight: bold;
font-family: Segoe WP Semibold
}
.w-100 {width: 100%}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid class4"><br><br><br><br>
<h1 class="b" id="ABOUT">ABOUT</h1>
<hr width="87%">
<br><br>
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6 ">
<p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>
Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
</div>
<div class="col-xs-6 col-md-6 "><img class="w-100" src="https://i.redd.it/b62rivs3uyo11.jpg" alt=""></div>
</div>
</div>
</div>
注意:您可能还希望从col-xs-6
切换到col-xs-12
,因此引导程序可以使用其网格的所有12列。
答案 1 :(得分:1)
为了使其对移动设备响应,我将两个元素的col-xs-6
更改为col-xs-12
,然后添加了width: 100%
。看下面的例子:
.class4{
height: 650px; background-color: SlateGrey; padding-top: 8px;padding-left: 20px;
}
h1.b{
text-align: center;
color:white;
font-weight: bold;
font-family:Segoe WP Semibold
}
.w-100 {
max-width: 100%
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid class4">
<br><br><br><br>
<h1 class="b" id="ABOUT">ABOUT</h1><hr width="87%">
<br><br>
<div class="container">
<div class="row" >
<div class="col-xs-12 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>
Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p>
</div>
<div class="col-xs-12 col-md-6 ">
<img src="https://cdn.pixabay.com/photo/2016/06/18/17/42/image-1465348_960_720.jpg" alt="image" class="w-100">
</div>
</div>
</div>
</div>
</body>
</html>
答案 2 :(得分:1)
您可以将style="max-width: 100%; height: auto;"
添加到img中。并且它将正常工作。
<div class="col-xs-6 col-md-6 "><img style="max-width: 100%; height: auto;" src="C:/Users/user/Desktop/images/7.jpg" alt="" ></div>
答案 3 :(得分:1)
要固定图像向右移动,您需要通过将宽度设置为100%来使尺寸响应。要确定背景没有覆盖整个页面,您需要删除定义的高度。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.class4{
background-color: SlateGrey; padding-top: 8px;padding-left: 20px;
}
h1.b{ text-align: center;
color:white;
font-weight: bold;
font-family:Segoe WP Semibold}
.responsive {
width: 100%;
}
</style>
<body>
<div class="container-fluid class4"><br><br><br><br><h1 class = "b" id="ABOUT">ABOUT</h1><hr width="87%">
<br><br>
<div class="container">
<div class="row" >
<div class="col-xs-6 col-md-6 "><p style="color:white"><span style="font-size:120%;font-family:Segoe WP Semibold">Sed ut perspiciatis unde omnis iste natus error sit vo- luptatem accusantium doloremque laudantium, totam rem aperiam</span><br><br><br><span style="font-size:80%;font-family:Segoe WP Semibold"> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam elus modi tempora incidunt ut labore et dolore <br>magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum <br> exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?<br><br>
Quis autem vei eum lure reprehenderit qui in ea voluptate velit esse quam nlhil molestiae consequatur, vel illum qui dolorem eum</span></p></div>
<div class="col-xs-6 col-md-6 "><img class="responsive" src="https://i.redd.it/b62rivs3uyo11.jpg" alt="" ></div>
</div>
</div>
</div>
</div>
</body>
</html>