Adaptar imagen a un figure
Publicado por carlosVallSego (5 intervenciones) el 25/10/2021 17:30:29
Hola a todos. Estoy haciendo una web y en una sección se muestran imágenes que suben los usuarios. Claro yo no puedo controlar el tamaño de estas. Entonces quiero que se adapten a un figure independientemente de su tamaño.
He probado de varias formas pero no consigo que no me desplace los elementos que hay debajo al cambiar las imágenes de tamaño. Os porgo el código que tengo:
El HTML:
El CSS:
Gracias
He probado de varias formas pero no consigo que no me desplace los elementos que hay debajo al cambiar las imágenes de tamaño. Os porgo el código que tengo:
El HTML:
1
2
3
4
5
6
7
8
9
<section id="mostrarPostSeleccionado" class="">
<section id="contPostSeleccionado">
<h1>Post colgado por jose</h1>
<figure id="sliderIMG" class="slider-wrapper-IMG">
<img class="imgSlider" src="../photos/jose/12/1.jpg">
<figcaption class="pCaption">
</figcaption>
</figure>
El CSS:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
section#mostrarPostSeleccionado{ margin: auto;min-width: 450px;
max-width: 450px;
max-height: 730px;
z-index: 30;
position: absolute; top:0; left: 0; right:0; bottom: 0; } section#contPostSeleccionado{background-color: #f9fcff;
border: 2px solid #f9fcff;
padding: .5em;
margin: .5em;
max-width: 95%;
max-height: 95%;
min-height: 95%;
border-radius: 1em;
} section#contPostSeleccionado h1{ color: black;font-size: 1.5em;
text-align: center;
margin: 1em;text-decoration: underline;
}.slider-wrapper-IMG{
position: relative;padding: .5em;
height: auto;max-width: 80%;
max-height: 80%;
overflow: hidden; margin: auto;border-radius: 2em;
}.slider-wrapper-IMG .imgSlider{
width: 350px; height: 350px;max-width: 70%;
max-height: 70%;
border: 1px solid #f35e14;
border-radius: .8em;
}Gracias
Valora esta pregunta
0
