Estou criando um site mobile com design responsivo.
Dentro de uma div
tenho um slideshow que mostra imagens 300x300, eu preciso tornar esse slideshow responsivo sem mexer nos atributos width
e height
dele. O código é mais ou menos esse:
<div id="div-de-fora">
<div id="div-do-slideshow">
[elementos do slideshow]
</div>
</div>
//css
#div-do-slideshow{
width:300px;
}
#div-de-fora{
?????
}
Mexer no width
do #div-do-slidshow
não é possível, visto que ele usa o atributo left
para trocar as imagens.
É possível alterar a exibição do slideshow usando apenas CSS, parâmetros, etc. No #div-de-fora
?
Já tentei usar iframe
e FlexBox mas não tive sucesso.
Nesse projeto não estou usando jQuery, a solução deve usar apenas HTML, CSS e JavaScript puro.