如何根据固定宽度对图像进行响应大小

我有一个网站，其中一个水平部分分为两个。左侧是文本和一个垂直堆叠的按钮。右侧是图像。在屏幕的右侧，当屏幕收缩时，我试图使图像保持固定的像素量，可在特定的断裂点下降低其大小。在屏幕的左侧，我希望文本接近屏幕的一半，但并非总是50％(这取决于固定的图像大小(。但是，当我尝试执行此操作时，我一直在屏幕右侧的图像变得太大或太小或出现滚动条。

我了解这需要媒体查询，但是在PX，VW等方面，完成这些可变宽度和尺寸要求的最有效方法是什么？

一个类似的例子是本网站上的智能路线计划和车队管理部分：https：//workwave.com/右边的地图。

  @media screen and (max-width: 2000px) {
    .container {
        display: flex;
        flex-direction: row;
    }
  }
  @media screen and (max-width: 975px) {
    .logo-img {
        width: 50vw;
    }
  }
  .logo-img {
    width: 50vw;
  }
  /* @media screen and (max-width: 900px) {
    .logo-img {
        width: 700px;
    }
  } */
  .items {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: #0f2c4d;
  }

<body>
    <div class="container">
        <div class="items">  
            <h1>KJnjjkasdsad & asdfasdfasd dsfadfsada</h1>
            <p>Jnjasd dasklfsda dsfasd dsfklads fasd fasd asf asdlasd asdfasf asdfas asdlkmadsklmfasd fdaslmk fasd klmfasd asdklm fasdf.</p>
            <button type="button" class="btn btn-primary">Button</button>
        </div>
            <img class="logo-img" src="./images/fleet-sm.png" alt="Mountain View">
        <div></div>
        <div></div> 
    </div>
</body>

您也可以为不同的媒体拥有不同的样式表，例如：

<link rel="stylesheet" media="screen and (min-width: 900px)" href="widescreen.css">
<link rel="stylesheet" media="screen and (max-width: 600px)" href="smallscreen.css">

使用基于屏幕大小的任何CSS文件，因此您可以创建不同的CSS并将其用于特定的宽度范围，并且在Break Point上，它将更改其CSS，因为您指定下一个CSS文件的下一个CSS文件。

您还可以使用媒体查询根据屏幕宽度更改CSS。

//699px taken as demo
//for screen smaller than 699px 
@media screen and (max-width: 699px){
.whatever
{
//css
}
}
//for screen bigger than 699px
@media screen and (min-width: 699px){
.whatever
{
//css
}
}

在您的需求上，显示如何使用w3.css，使用此类别的类别，它已经具有针对不同类别的不同尺寸的书面媒体规则

<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<style>
.sc
{
width:100%;height:auto;
}
</style>
    <div class="w3-container">
        <div class="w3-half">  
            <h1>KJnjjkasdsad & asdfasdfasd dsfadfsada</h1>
            <p>Jnjasd dasklfsda dsfasd dsfklads fasd fasd asf asdlasd asdfasf asdfas asdlkmadsklmfasd fdaslmk fasd klmfasd asdklm fasdf.</p>
            <button type="button" class="btn btn-primary">Button</button>
        </div>
        <div class="w3-half">
            <img class="sc" src="http://www.neutelings-riedijk.com/content/images/6f711d8f7fec1c9f85dfcb5045d4f30b.jpg" alt="Mountain View">
    </div>
    </div>

相关内容

最新更新

热门标签：