Question

这是我的HTML代码：

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像素的图像。

Answer 1

你可以试试这个：

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
}

Answer 2

您的问题是文本元素与图像的比例不同。因此，如果强制图像与文本元素的高度相同，则图像将被拉伸。另一方面，如果您将图像的宽度调整到容器的最大值，您将体验到白色空间，因为它只有其他比例。

如果您根本不想裁剪图像（或使用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中;但我不确定对此的支持。

此方法的缺点可能是图像不是实际的DOM元素。这可能可能影响您的搜索引擎优化，因为您的图像不会像使用带有<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所示）。

图像和文本一行大小问题

/ *

媒体查询彩色框内容

2 个答案: