Html 为什么我的图像不会扩展到div的全部大小?
我目前正在努力使我的网站响应。我的站点的布局方式是,在桌面版上,它是2列6列并排的,我的站点(一页站点)的每个部分的页面都占据了100%的宽度和高度,也就是1页的大小。为了缩放图像,每个col-6都有100%的高度,同样,我的背景大小设置为100%大小。这对于桌面版本非常有效 问题是,当我缩小到平板电脑或手机时,每半页使用col-12,我将它们堆叠在一起,而不是并排排列,平板电脑上100%大小的图像div太大了,挤压掉了另一个div(因为截面高度只有100%)。而在手机上,它太小了,所以它在图像下显示了一堆空白 我觉得让它正确缩放的唯一方法是不在容器上设置高度,在div中使用img标记而不是背景图像,因为它只会占用所需的空间,而不会占用任何额外的空间。但问题是,现在它没有填满它所在的整个图像分区,在侧面和底部留下空白。我尝试过设置不同的尺寸、设置等,但无论我做什么都无法填满它。它在平板电脑和手机上也有同样的功能。我怎样才能让它工作 桌面上应该是什么样子(这是背景图片)—— 桌面上的外观(带img)—— 平板电脑(带背景图像)- 片剂(img)- 手机(带背景图像)- 流动电话(img)- HTML-Html 为什么我的图像不会扩展到div的全部大小?,html,css,twitter-bootstrap-3,responsive-design,Html,Css,Twitter Bootstrap 3,Responsive Design,我目前正在努力使我的网站响应。我的站点的布局方式是,在桌面版上,它是2列6列并排的,我的站点(一页站点)的每个部分的页面都占据了100%的宽度和高度,也就是1页的大小。为了缩放图像,每个col-6都有100%的高度,同样,我的背景大小设置为100%大小。这对于桌面版本非常有效 问题是,当我缩小到平板电脑或手机时,每半页使用col-12,我将它们堆叠在一起,而不是并排排列,平板电脑上100%大小的图像div太大了,挤压掉了另一个div(因为截面高度只有100%)。而在手机上,它太小了,所以它在图像
<section id="about" ng-controller="aboutController">
<div class="container-fluid">
<div class="row about-row">
<div class="about-left col-xs-12 col-md-6">
<img src="assets/images/jay-ocean.jpg" class="col-xs-12"/>
</div>
<div class="about-right col-xs-12 col-md-6">
<div class="about-content">
<div class="about-content-title">
<h1><strong>I'M JAY.</strong></h1>
</div>
<div class="about-content-info">
<p ng-if="about.firstParagraph">An entrepenurial minded, Full Stack Developer. Whenever I'm up against a challenge that I care about, it gives me a rush. Focusing on the big picture is important to me, but I never forget the smaller details. Anything that is not challenging is boring, and makes me yawn. Anything that is seemingly impossible interests me a lot. I'm ready to get to work.</p>
<p ng-if="!about.firstParagraph">Currently seeking a Javascript position, using the MEAN stack, in New York City. Being innovative, ambitious, and hard working are values that are very important to me. I want to join a company that has similar values and has goals of reaching ridiculous levels of success, not just modest realistic ones. I love working with a solid team.</p>
</div>
<div class="about-button">
<button ng-if="about.firstParagraph" class="label label-success" ng-click="about.switchParagraph()">MORE =></button>
<button ng-if="!about.firstParagraph" class="label label-success"><a href="/portfolio">VIEW SKILLS</a></button>
</div>
<div class="about-personal-info">
<h4>Email: jaybittner@gmail.com</h4>
</div>
<div class="about-icon">
<a href="{{ profile.url }}" ng-repeat="profile in about.profiles"><img ng-src="{{ profile.icon }}" /></a>
</div>
</div>
</div>
</div>
</div>
</section>
为什么不使用
cover
值设置background size
属性?刚刚尝试了这个^。在桌面版上效果很好,但当我看手机或平板电脑时,它无法扩展。下面是它现在在手机上的样子。另一个问题是,如果我使用背景图像,我需要将div height(.about left)设置为100%,当它在平板电脑或手机上时,考虑到图像小于100%,这会破坏设计。我的.about右边的div应该在下面被删除了。如果我把.about左边的大小改为50%,在手机上看起来不错。似乎要用这种方法工作,我需要一种方法,随着屏幕变小,。的百分比将减少。有没有一种动态调整div大小的方法?请访问此链接。
#about {
height: 100%;
width: 100%;
background: rgba(0,97,65,1);
background: -moz-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(0,97,65,1)), color-stop(7%, rgba(54,135,95,1)), color-stop(22%, rgba(36,123,85,1)), color-stop(53%, rgba(0,97,65,1)), color-stop(76%, rgba(34,121,84,1)), color-stop(90%, rgba(54,135,95,1)), color-stop(100%, rgba(54,135,95,1)));
background: -webkit-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -o-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: -ms-linear-gradient(left, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
background: linear-gradient(to right, rgba(0,97,65,1) 0%, rgba(54,135,95,1) 7%, rgba(36,123,85,1) 22%, rgba(0,97,65,1) 53%, rgba(34,121,84,1) 76%, rgba(54,135,95,1) 90%, rgba(54,135,95,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006141', endColorstr='#36875f', GradientType=1 );
background-repeat: no-repeat;
color: #101010;
}
/*#about .container-fluid, #about .row {
height: 100%;
}*/
/*.about-left {
height: 100%;
background-image: url('../../images/jay-ocean.jpg');
background-repeat: no-repeat;
background-size: 110%;
border-right: 3px solid #101010;
border-bottom: 3px solid black;
}*/
/*.about-left img {
height: 100%;
width: 100%;
object-fit: fill;
}*/
.about-right {
padding-top: 24vh;
padding-left: 3.4vw;
text-align: center;
}
.about-content {
width: 50%;
margin-left: auto;
margin-right: auto;
}
.about-content-title {
padding-bottom: -30px;
}
.about-content-title h1{
font-size: 3.1vw;
margin: 3px;
}
.about-content-info p {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-button button {
color: gray;
border: 1px solid #101010;
background-color: #101010;
font-size: 0.7vw;
}
.about-button a {
color: gray;
}
.about-personal-info h4 {
font-size: 1vw;
word-spacing: 0.3vw;
}
.about-icon img {
height: 3.5vh;
width: 1.75vw;
border-radius: 10px;
border: 1px solid #101010;
margin: 3px;
}