#logo-center {
    max-width: 100%;
    height: auto;
    display: flex;
}

@media only screen and (min-width:991px) {
    .logo-div {
        -webkit-margin-start: -5%;
        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 40%;
        right: 40%;
        position: absolute;
        z-index: 100;
        display: flex;
    }
}

@media only screen and (max-width:990px) {
    .logo-div {
        -webkit-margin-start: -5%;
        -webkit-margin-end: -15%;
        -webkit-margin-before: -6%;
        left: 40%;
        top: 42%;
        right: 42%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:700px) {
    .logo-div {
        left: 38%;
        top: 43%;
        right: 40%;
        position: absolute;
        z-index: 100;
    }
}

@media only screen and (max-width:500px) {
    .logo-div {
        left: 35%;
        top: 42%;
        right: 40%;
        position: absolute;
        z-index: 100;
    }
}
<div class="logo-div">
            <div id="logo-center"><img style="border-radius: 7%;" src="https://www.crockerriverside.org/sites/main/files/main-images/camera_lense_0.jpeg"></div>
        </div>

https://jsfiddle.net/8rmL5a7f/ Saya perlu mengubah ukuran gambar di tengah (jadi responsif di mozilla/chrome/ie)) dan mengaturnya di tengah halaman untuk menutupi salib di mana batas tabel bertemu. Kode saya hanya berfungsi di firefox, tetapi tidak di chrome atau IE. Adakah yang bisa membantu saya untuk mengetahui alasannya?

1
simone_meh 19 September 2019, 19:06

1 menjawab

Jawaban Terbaik

Karena Anda tidak mengatur lebar gambar dan gambar Anda benar-benar besar, gambar tersebut akan memenuhi div bungkus.

Melakukan hal ini:

#logo-center img {
   width: 100%;
   height: auto;
}

height:auto akan menjaga rasio gambar.

Di komputer saya (Windows) di chrome sebelum:

enter image description here

Di komputer saya (Windows) di chrome setelah:

enter image description here


Untuk memusatkan gambar di div:

Anda harus membuat .table-responsive.bordered.fill dan .logo-div sama dengan width dan height dan daripada:

#container {
  position: relative;
}
#container .logo-div {
  postion: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Dan harap hapus properti right di .logo-div.

Pada dasarnya, top dan left 50% akan sejajar di tengah tetapi mempertimbangkan batasnya. Untuk meletakkan di tengah dengan mempertimbangkan pusat elemen, Anda perlu menggunakan transform: translate atas -50% dan kiri -50% karena ini akan mundur berdasarkan ukuran elemen anak (.logo-div) dan bukan induknya (#container) atau batas anak.

PS: Anda dapat melakukannya dengan margin negatif atau flexbox (justify-content dan align-item di tengah). Tapi saya biasanya menggunakan solusi yang disajikan ini dengan terjemahan.

0
Rafael Perozin 20 September 2019, 09:17