Divning kengligi uni tasvirning kengligi bilan tenglashtiring

Bu erda yana bir yangi savol. CSSni o'rganish. Men juda oddiy deb o'ylagan narsalarni qilishga harakat qilyapman, lekin buni amalga oshirish yo'lini topa olmadim, yoki savolga mos javob.

Menda oddiygina loyiha bor, ba'zilari kontent va taglik. Kontent oq chegaradagi div va uning ichida rasm mavjud. Men divni tasvirga kengroq va kengroq bo'lishini xohlayman. Men 430px kengligi oldindan belgilab qo'ydim, lekin kenglikni tasvirning kengligi qanday bo'lishiga sozlash uchun kodni bilishni istayman.

enter image description here

Kod

html

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-Kod">

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap {
  position: relative;
  border: 1px solid white;
  width: 430px;
  display: block;
  margin: 0 auto;
  top: 50%;
  transform: translateY(-50%);
}
<div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    
  </div>
</div>
<div id="footer"> </div>
</div> </div>
1

9 javoblar

Rasmdagi chegara so'rashni istasangiz, u yerga qo'shing

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap {
  position: relative;
  /*border: 1px solid white;
  width: 430px;
  display: inline-block;
  line-height: 0;
  margin: 0 auto;*/
  top: 50%;
  transform: translateY(-50%);
  text-align: center; /*center image horizontally*/
}

#imagewrap img {
  border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    
  </div>
</div>
<div id="footer"> </div>
</div> </div>
1
qo'shib qo'ydi

Rasmdagi chegara so'rashni istasangiz, u yerga qo'shing

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap {
  position: relative;
  /*border: 1px solid white;
  width: 430px;
  display: inline-block;
  line-height: 0;
  margin: 0 auto;*/
  top: 50%;
  transform: translateY(-50%);
  text-align: center; /*center image horizontally*/
}

#imagewrap img {
  border: 1px solid white;
}
<div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    
  </div>
</div>
<div id="footer"> </div>
</div> </div>
1
qo'shib qo'ydi

display: inline-block; kodini .imagewrap ga kenglik kiritmasdan qo'shing.

.imagewrap {
  display: inline-block;
}

Agar siz tasvirni markazlashtirilgan div bilan birga ko'rishni istasangiz, atrofida yana bir div qo'shing:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
} 

Lekin, albatta, bu rasmning atrofida div kerakmi? Chekka qo'shimcha div holda rasmga qo'shilishi mumkin.

1
qo'shib qo'ydi

display: inline-block; kodini .imagewrap ga kenglik kiritmasdan qo'shing.

.imagewrap {
  display: inline-block;
}

Agar siz tasvirni markazlashtirilgan div bilan birga ko'rishni istasangiz, atrofida yana bir div qo'shing:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
} 

Lekin, albatta, bu rasmning atrofida div kerakmi? Chekka qo'shimcha div holda rasmga qo'shilishi mumkin.

1
qo'shib qo'ydi

display: inline-block; kodini .imagewrap ga kenglik kiritmasdan qo'shing.

.imagewrap {
  display: inline-block;
}

Agar siz tasvirni markazlashtirilgan div bilan birga ko'rishni istasangiz, atrofida yana bir div qo'shing:

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
} 

Lekin, albatta, bu rasmning atrofida div kerakmi? Chekka qo'shimcha div holda rasmga qo'shilishi mumkin.

1
qo'shib qo'ydi

Ko'rsatkichni ko'rsatsangiz: inline-block, keyin text-align: center kodini kiriting

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  text-align: center;
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap{
    position: relative;
        border: 1px solid white;
        width: 430px;
        display: inline-block;
        top: 50%;
    transform: translateY(-50%);
}
    <div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    
  </div>
</div>
<div id="footer"> </div>
</div> </div>
0
qo'shib qo'ydi

Ko'rsatkichni ko'rsatsangiz: inline-block, keyin text-align: center kodini kiriting

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

html,
body {
  margin: 0px;
  padding: 0px;
  height: 100vh;
}

#header {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#footer {
  position: relative;
  height: 10%;
  width: 100%;
  background-color: lightgray;
}

#container {
  text-align: center;
  height: 80%;
  width: 100vw;
  background-color: red;
}

#imagewrap{
    position: relative;
        border: 1px solid white;
        width: 430px;
        display: inline-block;
        top: 50%;
    transform: translateY(-50%);
}
    <div id="header"> </div>
<div id="container">
  <div id="imagewrap">
    
  </div>
</div>
<div id="footer"> </div>
</div> </div>
0
qo'shib qo'ydi

Check out this fidde: https://jsfiddle.net/56myv9g2/1/

#imagewrap img{
  display:block;
}

#imagewrap{
    position: relative;
    border: 1px solid white;
    display: inline-block;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

#container {
  height: 80%;
  width: 100vw;
  text-align:center;
  background-color: red;
}

Bundan tashqari, chegarani hech bo'lmaganda tasvirga qo'shishingiz mumkin

0
qo'shib qo'ydi

Check out this fidde: https://jsfiddle.net/56myv9g2/1/

#imagewrap img{
  display:block;
}

#imagewrap{
    position: relative;
    border: 1px solid white;
    display: inline-block;
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
}

#container {
  height: 80%;
  width: 100vw;
  text-align:center;
  background-color: red;
}

Bundan tashqari, chegarani hech bo'lmaganda tasvirga qo'shishingiz mumkin

0
qo'shib qo'ydi