Html 使图像变大而不影响格式_Html_Css_Twitter Bootstrap

Html 使图像变大而不影响格式

html css twitter-bootstrap

Html 使图像变大而不影响格式,html,css,twitter-bootstrap,Html,Css,Twitter Bootstrap,我有一个网站正在进行更新，其中一个更新是在不改变文本和对齐方式的情况下，使中间的图像变大。下面的图片是我正在做的，也是我想要避免的基本上，我需要中间的徽标更大，而不必弄乱文本是如何排列的，但是每当我把它放大时，它会把所有的文本都推下来，把标志从中心取出来。下面是我正在处理的区域和图像的代码 HTML <div class="padding"> <div class="container"> <div class="row text-center m

我有一个网站正在进行更新，其中一个更新是在不改变文本和对齐方式的情况下，使中间的图像变大。下面的图片是我正在做的，也是我想要避免的

基本上，我需要中间的徽标更大，而不必弄乱文本是如何排列的，但是每当我把它放大时，它会把所有的文本都推下来，把标志从中心取出来。下面是我正在处理的区域和图像的代码

HTML

<div class="padding">
  <div class="container">
    <div class="row text-center mt-30">
      <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="text-icons" ><img src="images/<?php echo $icons[2]["icon_img"]; ?>"></div>
        <div class="featureitem img-item">
          <!-- <strong >Empowerment</strong> -->
          <p class="">An innovative approach that drives the discovery of new medicines. By collaborating with Circuit Clinical’s network, we have empowered individuals to take charge of the journey to finding cures through their participation.</p>
        </div>
      </div>
       <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="text-icons-middle" >
        <img src="images/<?php echo $icons[0]["icon_img"]; ?>">
      </div>
        <div class="featureitem img-item">
         <!--  <strong >Engagement</strong> -->
          <p class="">We are an Integrated Research Organization [IRO] dedicated to optimizing the clinical research experience by delivering a comprehensive research program into our physicians practices. We make clinical research more manageable with our dedicated team of research professionals who match clinical trials to a physician’s areas of interest, assist with patient recruitment and study visits while filing all regulatory requirements.</p>
        </div>
      </div>
<!--       <div class="border"></div> -->
      <div class="col-lg-4 col-md-12 col-sm-12 col-xs-12">
        <div class="text-icons" ><img src="images/<?php echo $icons[1]["icon_img"]; ?>"></div>
        <div class="img-item">
          <!--   <strong >Enablement</strong> -->
          <p class="">Transforms the experience of finding and participating in clinical trials for patients everywhere. It empowers prospective patients to confidently select a trial site trusted by their peers. Sites, sponsors and CROs leverage TrialScout<sup>TM</sup> to share their story and engage patients to consider participating in their trials.</p>
        </div>
      </div>
  <!--     <div class="border"></div> -->

      <div class="col-md-1"></div>
    </div>
  </div>
</div>

我认为可以使用“位置”方法来避免这个问题，只需将父div的“位置”设置为“相对”，将“文本”的div设置为“绝对”，然后将文本设置为具有固定的顶部值。所以当你增加图片的大小时，它不会影响下面文本的位置。我制作了一个简单的程序供您参考：

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<style>
#parent_div{
position: relative;
}
#div_image{
position: absolute;
top:0px;
left:0px;
background-color: green;
height:100px;
width: 300px;
}

#div_text{
position: absolute;
top:150px;
left:0px;
size:5px;
height:100px;
width: 300px;
}

#button{
position: absolute;
left:400px;
}
</style>
</head>
<body>
<div id="parent_div">
    <div id="div_image">
        <img src="">
    <div>

    <div id="div_text">
    Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images.. 
    </div>
</div>

<button id="button" type="button" onclick="inc_size()">Increase size</button>

<script>
function inc_size(){
    var test = document.getElementById("div_image").style.height = "150px";
}
</script>
</body>
</html>


CSS模板
#家长组{
位置：相对位置；
}
#div_图像{
位置：绝对位置；
顶部：0px；
左：0px；
背景颜色：绿色；
高度：100px；
宽度：300px；
}
#div_文本{
位置：绝对位置；
顶部：150px；
左：0px；
尺寸：5px；
高度：100px；
宽度：300px；
}
#钮扣{
位置：绝对位置；
左：400px；
}
基本上，我需要中间的标志更大，而不必弄乱文本是如何排列的，但是每当我把它放大时，它会把所有的文本都推下来，把标志从中心取出来。下面是我正在处理的区域和图像的代码。。
增大尺寸
函数inc_size（）{
var test=document.getElementById（“div_image”）.style.height=“150px”；
}

<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS Template</title>
<style>
#parent_div{
position: relative;
}
#div_image{
position: absolute;
top:0px;
left:0px;
background-color: green;
height:100px;
width: 300px;
}

#div_text{
position: absolute;
top:150px;
left:0px;
size:5px;
height:100px;
width: 300px;
}

#button{
position: absolute;
left:400px;
}
</style>
</head>
<body>
<div id="parent_div">
    <div id="div_image">
        <img src="">
    <div>

    <div id="div_text">
    Basically, I need the logo in the middle to be larger without messing with how the text is lined up, but whenever I make it larger it pushes all the text down and takes the logo out of the center. Below is the code for the area I'm working on and the images.. 
    </div>
</div>

<button id="button" type="button" onclick="inc_size()">Increase size</button>

<script>
function inc_size(){
    var test = document.getElementById("div_image").style.height = "150px";
}
</script>
</body>
</html>