Menyesuaikan dan Ukuran gambar agar sesuai dengan div (bootstrap)

98

Saya mencoba untuk mendapatkan gambar agar sesuai dengan div ukuran tertentu. Sayangnya, gambar tersebut tidak sesuai dengan itu dan malah menyusut secara proporsional ke ukuran yang tidak cukup besar. Saya tidak yakin apa cara terbaik untuk mendapatkan gambar agar pas di dalamnya.

Jika ini tidak cukup kode, saya akan dengan senang hati menyediakan lebih banyak, dan saya terbuka untuk memperbaiki kesalahan lain yang saya abaikan.

Ini HTML-nya

<div class="span3 top1">  
        <div class="row">
          <div class="span3 food1">
              <img src="images/food1.jpg" alt="">
          </div>
        </div>
            <div class="row">
              <div class="span3 name1">
                  heres the name
            </div>
            </div>
          <div class="row">
              <div class="span3 description1">
                  heres where i describe and say "read more"
            </div>
            </div>


      </div>

CSS saya

.top1{

    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;


}

.food1{

background-color:#000000;
height:230px;


}

.name1{

background-color:#555555;
height:90px;

}

.description1{

background-color:#777777;
height:70px;


}

html css twitter-bootstrap

— smilefreak24
sumber

Saya telah memposting Jawaban untuk pertanyaan serupa di sini: stackoverflow.com/questions/41870216/…

— FredyWenger

57

Anda dapat secara eksplisit menentukan widthdan heightdari gambar, tetapi hasilnya mungkin bukan yang terbaik.

.food1 img {
    width:100%;
    height: 230px;
}

jsFiddle

... berdasarkan komentar Anda, Anda juga dapat memblokir apa saja overflow- lihat contoh ini untuk melihat gambar yang dibatasi oleh tinggi dan terpotong karena terlalu lebar.

.top1 {
    height:390px;
    background-color:#FFFFFF;
    margin-top:10px;
    overflow: hidden;
}

.top1 img {
    height:100%;
}

— jterry
sumber

Saya berusaha melakukan itu, sayangnya seperti yang Anda katakan, hasilnya bukan yang terbaik. Idealnya, saya ingin gambar dikecilkan sehingga tinggi gambar sesuai dengan tinggi div, dan lebar gambar yang melebihi lebar div pembatas akan disembunyikan. Jika itu masuk akal

— smilefreak24

Ya itulah yang saya cari! Terima kasih banyak!

— smilefreak24

Jawaban LAINNYA adalah yang terbaik, cukup menambahkan class = "img-responsive" ke tag img sudah cukup!

— iMobaio

1

lebih baik dari width:100%;itu max-width:100%;dan lebih baik semuanya adalah kelas img-responsivedi BS3 atau img-fluiddi BS4.

— Nabi KAZ

169

Coba cara ini:

<div class="container">
    <div class="col-md-4" style="padding-left: 0px;  padding-right: 0px;">
        <img src="images/food1.jpg" class="img-responsive">
    </div>
</div>

MEMPERBARUI:

Pada Bootstrap 4 img-responsivemenjadi img-fluid, maka solusi menggunakan Bootstrap 4 adalah:

<div class="container">
    <div class="col-md-4 px-0">
        <img src="images/food1.jpg" class="img-fluid">
    </div>
</div>

— Shafeeque S
sumber

5

Keren! class = "img-responsive" membantu. Mungkin ini harus menjadi jawaban yang diterima hari ini.

— Anupam

1

class = "img-responsive" jelas merupakan cara yang tepat! Ini harus menjadi jawaban yang diterima.

— iMobaio

28

itu img-fluidsekarang, tidakimg-responsive

— wordsforthewise

51

Hanya kepala sampai yang Bootstrap 4 sekarang menggunakan img-fluidbukannyaimg-responsive , cek jadi ganda yang versi yang Anda gunakan jika Anda mengalami masalah.

— Alex
sumber

3

img-fluidmelakukannya ! Terima kasih!

— pyano

32

Cukup tambahkan kelas img-responsiveke imgtag Anda , itu berlaku di bootstrap 3 dan seterusnya!

— Shashi
sumber

Maaf tapi bisakah Anda lebih spesifik, saya tidak mendapatkan pertanyaan Anda dengan benar, Terima kasih!

— Shashi

7

Saya memiliki masalah yang sama dan menemukan solusi sederhana berikut. Cukup tambahkan sedikit padding ke gambar dan itu mengubah ukurannya sendiri agar sesuai dengan div.

<div class="col-sm-3">
  <img src="xxx.png" class="img-responsive" style="padding-top: 5px">
</div>

— wiltonio
sumber

1

Dipecahkan DENGAN Bootstrap daripada CSS khusus. Terima kasih.

— mattgreen

7

Saya menggunakan ini dan bekerja untuk saya.

<div class="col-sm-3">
  <img src="xxx.png" style="width: auto; height: 195px;">
</div>

— alanHdez.dll
sumber

4

Jika ada di antara Anda yang mencari Bootstrap-4 . Ini dia

<div class="row no-gutters">
    <div class="col-10">
        <img class="img-fluid" src="/resources/img1.jpg" alt="">
    </div>
</div>

— Dexter
sumber

ini bukan solusi ideal jika Anda memiliki kolom lain dengan teks di dalamnya karena itu juga akan sulit melawan tepi perbatasan

— James Burke

2

Sebagian besar waktu, proyek bootstrap menggunakan jQuery, sehingga Anda dapat menggunakan jQuery.

Dapatkan saja lebar dan tinggi induk dengan JQuery.offsetHeight()dan JQuery.offsetWidth(), dan setel ke elemen anak dengan JQuery.width()danJQuery.height() .

Jika Anda ingin membuatnya responsif, ulangi juga langkah-langkah di atas di atas $(window).resize(func).

— Mohsen
sumber