div调整大小时调整图像大小

时间:2016-11-09 22:53:52

标签: css html5

我在横幅上工作,当父母div改变时,我无法调整图片大小,并将其放在div的中心。这是我的代码:

<!DOCTYPE html>
<html dir="rtl">
<head>
 <meta charset="utf-8">
 <style>
 .inner-div{
            padding: 50px;
            height: 400px;
            width: 100%;
            background-color: #3787be;
        }
        .con-div{
                height: 300px;
                /* border: solid red 5px; */
                margin: 0 auto;
                display: inline-block;
                width: 100%;
                /* padding: 50px; */
        }
        .con-div{
                height: 300px;
                width: 50%;
                float: left;
        }
        .text-div{
            vertical-align: baseline;
            padding: 40px 100px 40px 40px;
            color: white;
            line-height: 20px;
        }
        .img-option{
                width: 614px;
                height: 290px;
                padding: 5px;
                background-color: white;
        }
    </style>
</head>
<body>
<div class="inner-div">
    <div class="outer-div">
        <div class="con-div">
            <img src="../image/14682235441.jpg" alt="dice" class="img-option">
        </div>
        <div class="con-div text-div">
            <h1> العلم نور العلم نور </h1>
            <p> العلم نور العلم نور العلم نور العلم نور العلم نور العلم نور </p>
            <p> العلم نور العلم نور العلم نور العلم نور العلم نور العلم نور </p>
            <p> العلم نور العلم نور العلم نور العلم نور العلم نور العلم نور </p>
            <p> العلم نور العلم نور العلم نور العلم نور العلم نور العلم نور </p>
        </div>
    </div>
</div>
</body>
</html>

1 个答案:

答案 0 :(得分:2)

这应该适合你:

.img-option {
  width:100%;
  max-width:614px;
  height:auto;
  position:relative;
  display:block;
  margin:0 auto;
}