I have attached all the images first image is the image where i am getting issue and second one is the image which is correct and third is for mobile display.
<div class="eighth-page" id="eighth-page">
<div class="container-fluid">
<div class="row">
<div class="col-md-6" style="background-color: #E44E29;display: inline;">
<div class="eight-page-content">
<div class="eighth-page-heading">
<h3>PX Booth</span></h3>
<h5>PX Booth Hire</span></h5>
<!-- line height -->
<h5>PX Booth Hire</span></h5>
<!-- line height -->
</div>
<div class="eight-page-text">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
<p>
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</div>
<div class="eighth-page-content-btn">
<a href="#"><span class="btn-learn">Learn</span><span class="btn-more">More</span></a>
</div>
</div>
</div>
<div class="col-md-6">
<div class="eighth-page-img">
<img src="img/5.jpg" class="img-responsive eighth-img">
</div>
</div>
</div>
</div>
</div>
这是我的CSS:
/ ---------------------- 第八页 - 有色 ---------------------- /
.eight-page-content {
margin-top: 40px;
margin-bottom: 40px;
margin-right: 10px;
margin-left: 30px;
width: 80%;
}
.eighth-page-heading h3 {
font-size: 30px;
text-transform: uppercase;
color: #fff;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eighth-page-heading h5 {
font-size: 16px;
text-transform: uppercase;
color: #9dff00;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eight-page-text {
padding-top: 20px;
padding-bottom: 20px;
}
.eight-page-text p {
color: #fff;
font-weight: 100;
font-size: 16px;
text-transform: capitalize;
}
.eighth-page-content-btn {
text-align: center;
margin-top: 27px;
margin-bottom: 27px;
}
.eighth-page-content-btn a {
text-decoration: none;
}
.btn-learn {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #9dff00;
text-transform: uppercase;
color: #fff;
font-weight: 600;
font-size: 16px;
word-spacing: 2px;
}
.btn-more {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #f2f0f4;
text-transform: uppercase;
color: #000;
font-weight: 600;
font-size: 16px;
}
.bg-color
{
background-color: #E44E29;
display: inline;
}
* /
@media only screen and (max-width: 480px)
{
.eight-page-content {
margin-top: 40px;
margin-bottom: 40px;
margin-right: 10px;
margin-left: 30px;
width: 80%;
}
.eighth-page-heading h3 {
font-size: 30px;
text-transform: uppercase;
color: #fff;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eighth-page-heading h5 {
font-size: 16px;
text-transform: uppercase;
color: #9dff00;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eight-page-text {
padding-top: 20px;
padding-bottom: 20px;
}
.eight-page-text p {
color: #fff;
font-weight: 100;
font-size: 16px;
text-transform: capitalize;
}
.eighth-page-content-btn {
text-align: center;
margin-top: 27px;
margin-bottom: 27px;
}
.eighth-page-content-btn a {
text-decoration: none;
}
.btn-learn {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #9dff00;
text-transform: uppercase;
color: #fff;
font-weight: 600;
font-size: 16px;
word-spacing: 2px;
}
.btn-more {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #f2f0f4;
text-transform: uppercase;
color: #000;
font-weight: 600;
font-size: 16px;
}
.bg-color
{
background-color: #E44E29;
display: inline;
}
}
@media only screen and (max-width: 768px)
{
.eight-page-content {
margin-top: 40px;
margin-bottom: 40px;
margin-right: 10px;
margin-left: 30px;
width: 80%;
}
.eighth-page-heading h3 {
font-size: 30px;
text-transform: uppercase;
color: #fff;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eighth-page-heading h5 {
font-size: 16px;
text-transform: uppercase;
color: #9dff00;
text-align: left;
font-weight: 700;
line-height: 1.5em;
}
.eight-page-text {
padding-top: 20px;
padding-bottom: 20px;
}
.eight-page-text p {
color: #fff;
font-weight: 100;
font-size: 16px;
text-transform: capitalize;
}
.eighth-page-content-btn {
text-align: center;
margin-top: 27px;
margin-bottom: 27px;
}
.eighth-page-content-btn a {
text-decoration: none;
}
.btn-learn {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #9dff00;
text-transform: uppercase;
color: #fff;
font-weight: 600;
font-size: 16px;
word-spacing: 2px;
}
.btn-more {
padding-top: 15px;
padding-bottom: 15px;
padding-right: 25px;
padding-left: 25px;
background-color: #f2f0f4;
text-transform: uppercase;
color: #000;
font-weight: 600;
font-size: 16px;
}
.bg-color
{
background-color: #E44E29 !important;
display: inline;
}
}
/*----------------------------------
Media Query for img of eighth page
----------------------------------*/
@media (max-width:767px) {
.eighth-page-img img {
max-width: 100%;
max-height: 100%;
}
}
@media (min-width:768px) {
.eighth-page-img img {
max-width: 100vh;
max-height: 100vh;
}
}
@media (min-width:992px) {
.eighth-page-img img {
max-width: 100vh;
height: 480px;
}
}
@media (min-width:1200px) {
.eighth-page-img img {
max-width: 100vh;
height: 436px;
}
}
![This is the issue I am getting when I resize the browser. I have used max-height: 100vh and max-width:100vh. Either the image get stretched or image get magnified and overflow out of the div. ] 3
请帮助我,因为我是前端技术的新手。我正在使用bootstrap3并尝试过flexbox,但问题仍未解决。请帮助我,我正在使用大小为4000X2670像素的图像。
答案 0 :(得分:0)
你可以试试这个:
div.eighth-page-img {
width:100%;
height:100%;
overflow:hidden;
position:relative;
}
.eighth-page-img img {
width:100%; //or height:100% according to your requirement
position:absolute;
left:50px; // adjust according to your requirement
}
答案 1 :(得分:0)
您的问题是文本元素与图像的比例不同。因此,如果强制图像与文本元素的高度相同,则图像将被拉伸。另一方面,如果您将图像的宽度调整到容器的最大值,您将体验到白色空间,因为它只有其他比例。
如果您根本不想裁剪图像(或使用JavaScript),我认为您唯一的选择是强制文本元素与图像具有相同的比例(宽度大约比高度大50%),然后调整font-size / text元素以适合容器。
注意:这应该是一个评论,但我没有发表评论的声誉。
因此,我的建议将是以下之一(仅使用CSS而不是JavaScript):
建议1 - 制作图像容器position:absolute
并插入图像作为背景:
使用css background-image
属性将图像显示为css background-size: cover
。这将在图像大于容器时裁剪图像,但它将填充整个容器。
要实现此目的,您可以添加以下内容(重要提示:请记住从HTML文本中删除<img>
):
.row{
position:relative;
}
.eighth-page-img{
position:absolute;
top:0;
left:50%;
right:0;
bottom:0;
background-image: url("img/5.jpg");
background-size: cover;
background-position: center;
background-repeat:no-repeat;
}
请注意以下方法:
background-position
属性相对轻松地定位图像,使您可以移动图像以显示您希望用户看到的内容(如果图像的大部分内容由于裁剪)。srcset
属性,这也可能在建议2中;但我不确定对此的支持。<img>
描述的alt
媒体资源一样被考虑在内。
建议2 - 插入带有<img>
属性的图像,position:absolute
它的容器并使用z-index
以防止图像/ div与左侧的文本元素重叠。
这将包括您在搜索引擎优化中的<img>
- 关于这个问题的唯一“问题”可能是需要更多“管理”以适应每种情况。您很可能必须检查并调整不同窗口大小的left
属性,以确保它看起来像您想要的那样。
.row{
position:relative;
}
.eighth-page-img{
overflow:hidden;
position:absolute;
top:0;
left:50%;
right:0;
bottom:0;
}
.eighth-page-img img{
height:100%;
/* Change the left property to match your needs. */
left:-30%;
position:absolute;
}
建议3 - 将容器显示为一个表(使用css display:table
和display:table-cell
),这将使容器的大小相同。
你可以看到这种技术here。
但是,使用此技术仍然需要调整图像或文本大小,例如将图像作为背景插入(如建议1所示)。