Así que tengo que representar este ejemplo en mi sitio web imagen de mi sitio web , e hice esto con z-index en el archivo CSS, tengo un problema, cuando reduzco el navegador página, las dos imágenes no están pegadas y hay una especie de espacio en blanco entre ellas. Entonces, ¿cómo puedo tener una imagen receptiva y pegada cuando reduzco la página de mi navegador?

Vue.component('carousel', {
    template: `
        <div class="card-carousel" >
            <div class="thumbnails">
               
                <div 
                v-for="(image, index) in images" 
                :key="image.id" 
                :class="['thumbnail-image', (activeImage == index) ? 'active' : '']" 
                @click="activateImage(index)"> 
                <img :src="image.thumb" class="active"/>
                   
                </div>
            </div>
            <div class="containe-carousel">

                <span id = "textespan"> {{currentImage.text}}</span>
            <div class="photoshop-screenshot">                
            <img :src="currentImage.big"  alt="">
                    
            </div>
            <div class="card-img">
                <img :src="currentImage2.big2" alt="">
                   

            </div>
            </div>
        </div>
    `,
    computed: {

        currentImage() {
            return this.images[this.activeImage];
        },

        currentImage2() {
            return this.images[this.activeImage];
        }
     
    },

        data() {
            return {
                activeImage: 0,
            
            }
        },

        methods: {     
            activateImage(imageIndex) {
                this.activeImage = imageIndex;
            },  
            
        
        },
    
        props: ['images']
    });
.section{
    background-color: black;
}

.card-carousel {
    user-select: none;
    position: relative;
}

.containe-carousel {
    padding-top: 5%;
}

.thumbnails {
    display: flex;
    justify-content: space-evenly;
    flex-direction: row;

}

.thumbnail-image {
    display: fixed;
    align-items: center;
    cursor: pointer;
    padding: 2px;

}

.thumbnail-image > img {
    width: 100%;
    height: auto;
    transition: all 250ms;
    filter:  grayscale(100%);

}

.thumbnail-image:selected> img {
    box-shadow: 2px 2px 6px 1px rgba(0,0,0, 0.5);
    visibility: hidden;
    filter: none;
}


.card-img {
    position: relative;
}

 .card-img > img {
    margin: 0 auto;
    padding-top: 7%;
    z-index: 2; 
}

 .photoshop-screenshot {
    position:absolute;
    z-index: 1;
    width: 70%;
    right:-80px;
    bottom:-130px;
   
}

.active{ 
    filter: sepia(100%) hue-rotate(19deg) saturate(98) brightness(98%) ; 

}

#textespan {
    text-align: center;
}

.containe-carousel span {
    
    color: white;
    font-weight: bold;
}
                 
        <section class="section" id="app">
            <div class="container">
                <div class="text-center" style="margin:0px 50px">
                    <div class="heading-underscore">
                        <h2 class="dk-5q-color">
                             <?php say("X50Q-dashboard-title"); ?>
                         </h2> 
                    </div>
                    
                </div>
                <div class="columns">
                     <div class="column "> 
                        <div class="card-content">
                            <carousel
                                :starting-image="0"
                                :show-progress-bar="true"
                                :images="images"     
                            ></carousel>
                    
                        </div>   
                    </div> 
                </div>
            </div>            
    </section>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    
<script src ="/x/x50q-rgb-mechanical-keyboard/x50q-cloud-js.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data() { 
                
                return {
                    images: [
                       
                        {
                            text : 'Photoshop',
                            id: '1',
                            big: '/images/das-keyboard-x50q/photoshop-profile.PNG',
                            big2: '/images/das-keyboard-x50q/photoshop-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/photoshop-logo.jpg'
                        },
                        {
                            text : 'Aurocad',
                            id: '2',
                            big: '/images/das-keyboard-x50q/autocad-profile.png',
                            big2: '/images/das-keyboard-x50q/autocad-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/autocad-logo.png'
                        },
                        {
                            text : ' Counter-Strike',
                            id: '3',
                            big: '/images/das-keyboard-x50q/counterstrike-profile.png',
                            big2: '/images/das-keyboard-x50q/counterstrike-screenshot.jpg',
                            thumb: '/images/das-keyboard-x50q/counterstrike-logo.png'
                        },
                        {
                            text : 'League of Legends',
                            id: '4',
                            big: '/images/das-keyboard-x50q/leagueoflegends-profile.png',
                            big2: '/images/das-keyboard-x50q/leagueoflegends-screenshot.png',
                            thumb: '/images/das-keyboard-x50q/leagueoflegends-logo.jpg'
                        }
                    ],
                    
                
                }
            }
        });
    </script>
0
Shirley Truffier-Blanc 10 sep. 2018 a las 17:29

3 respuestas

La mejor respuesta

Ejecute el código y cambie el tamaño -> expanda el fragmento y cambie el tamaño del tamaño de la ventana.

Ver este código:

.container {
    position: relative;
    display: inline-block;
}
.wrapper {
  padding-right: 30%;
}
.wrapper2 {
    position: absolute;
    bottom: -40%;
    width: 100%;
}
.first {
    max-width: 100%;
}

.last {
    float: right;
    max-width: 50%;
}
<div class="container">
        <div class="wrapper">
            <img src="https://i.stack.imgur.com/JCQ2g.jpg" class="first">
        </div>
        <div class="wrapper2">
            <img src="https://i.stack.imgur.com/yqoSo.jpg" class="last">
        </div>
    </div>
1
Romildo da Silva 10 sep. 2018 a las 20:32

¿Me gusta esto? Póngalos en una fila flexible para controlar el ancho del envoltorio externo que luego responde. Ajuste según sea necesario dentro.

.wrapper {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100%;
  width: 100%;
  background: lightgrey;
}

.a {
  flex: 1 0;
  height: 200px;
  background: orange;
}

.b {
  flex: 1 0;
  height: 200px;
  position: relative;
  top: 100px;
  left: -100px;
  background: pink;
}
<div class="wrapper">
  <div class="a">
  </div>
  <div class="b">
  </div>
</div>
0
Jquestions 10 sep. 2018 a las 15:26

picture with details

Te muestro aquí más claro el problema con más detalles.

Y realmente quiero obtener el primer resultado, cuando tengo una página web grande y cuando tengo una página pequeña también. Necesito que estas dos imágenes se peguen como el primer ejemplo para todo tipo de tamaño de página exactamente.

0
Shirley Truffier-Blanc 10 sep. 2018 a las 19:02