CSS - Ajustar el tamaño de un iframe con @media

 
Vista:
sin imagen de perfil
Val: 9
Ha aumentado su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ajustar el tamaño de un iframe con @media

Publicado por CARLOS (2 intervenciones) el 26/04/2018 17:45:05
Hola, el problema a resolver que tengo, es que no veo como indicar en el .css, que un iframe (planito de google) debe cambiar de tamaño según el dispositivo con @media().

Google me da el siguiente código de un iframe para insertar en php (indico también el div que lo contiene):

1
2
3
<div class="parymar_mapa_caba">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.134573943128!2d-58.484539784768494!3d-34.67655288044066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc948835f8fd5%3A0x34ee4d36e06150e2!2sZelarray%C3%A1n+5982%2C+C1439AHD+CABA!5e0!3m2!1ses-419!2sar!4v1520993963138" width="1100" height="440" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

Donde width="1100". El tema es que cuando cambio el ancho del dispositivo, el marcador en ROJO del domicilio, queda fuera del centro de la imagen. Yo observé que cambiando manualmente el ancho, el marcador rojo quedaba centrado, pero no se cómo definir el valor width desde css para un iframe.

Saludos!
Carlos
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de juan jose
Val: 165
Bronce
Ha mantenido su posición en CSS (en relación al último mes)
Gráfica de CSS

Ajustar el tamaño de un iframe con @media

Publicado por juan jose (57 intervenciones) el 26/04/2018 22:16:53
1
2
3
<div class="parymar_mapa_caba">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3281.134573943128!2d-58.484539784768494!3d-34.67655288044066!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc948835f8fd5%3A0x34ee4d36e06150e2!2sZelarray%C3%A1n+5982%2C+C1439AHD+CABA!5e0!3m2!1ses-419!2sar!4v1520993963138"  frameborder="0" style="border:0" allowfullscreen></iframe>
</div>

esto en el html, eliminado width="1100" height="440"

ahora tienes varias posibilidades en el css de nombrarlo

1. segun lo tienes ahora

1
2
3
4
.parymar_mapa_caba iframe{
    width:100%;
    height:100%;
}

que seria, el iframe que esta dentro del div con clase parymar_mapa_caba

2. Darle una clase al iframe directamente

1
2
3
4
.clase{
    width:100%;
    height:100%;
}

le puse 100% en alto y ancho para que se ajuste siempre al div que lo contiente


4F3

aqui el div tenia un tamaño de 500 x 500 px, y el indicador se que da en el medio

5B1

aqui el div tenia un tamano del 100% x 100% y se queda en el medio tambien el indicador

saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 9
Ha aumentado su posición en 3 puestos en CSS (en relación al último mes)
Gráfica de CSS

Ajustar el tamaño de un iframe con @media

Publicado por CARLOS (2 intervenciones) el 27/04/2018 00:44:11
Buenísimo!
Muchas gracias.

Saludos
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar