Abderrazzak Benbouya Abderrazzak Benbouya - 26 days ago 15
CSS Question

resize image whene div resizing

Hi guys i really need some help her i work on a banner and i can't make the picture resize when his parent div change, and make it in the center of div. her's my code and thank you for help
Hi guys i really need some help her i work on a banner and i can't make the picture resize when his parent div change, and make it in the center of div. her's my code and thank you for help

<!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>

Answer

This should work for you:

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