Estou trabalhando em um site com característica responsiva e nele tenho uma página de promoções e gostaria que as imagens acompanhassem a mudança de tamanho do navegador, o tamanho máximo da largura da imagem é 1080px, seguindo algumas dicas de companheiros refiz o css e exemplo exibido isoladamente funciona corretamente, mas ao inseri-lo em minhas Tabs o mesmo não funciona, ficou assim:
div#page { width: auto; text-align: center; padding: 40px 20px; } img { max-width: 100%; }
O código para exibição:
<div id="page">
<img src="minhaimagem.png" alt="">
A página pode ser vista aqui:
O código da minha TAB está assim:
/* ---------------------------------------------------------------------- */ /* Tabs /* ---------------------------------------------------------------------- */ .ui-tabs { font-family: 'Open Sans', sans-serif; font-size: 12px; line-height: 1.5em; /* 18px */ margin-bottom: 20px; padding: 0; border: none; background: none; width:1100px; } .ui-tabs .ui-helper-reset { line-height: 1.5em; /* 18px */ } .ui-tabs .ui-widget-content { color: #383838; } .ui-tabs .ui-tabs-hide { position: absolute; left: -10000em; } .ui-tabs .ui-tabs-nav { padding: 0; border: none; } .ui-tabs .ui-widget-header, .ui-tabs .ui-state-active { background: none; } .ui-tabs .ui-tabs-nav li, .ui-tabs .ui-tabs-nav li.ui-tabs-active { float: left; margin: 0 2px -1px 0; padding: 0; position: relative; z-index: 10; border: none; } .ui-tabs .ui-tabs-nav li a { display: block; padding: 5px 10px; color: #383838; background-color: #f7f7f7; border: 1px solid #e5e5e5; border-bottom: none; } .ui-tabs .ui-tabs-nav li.ui-state-active a { background-color: #fff; padding-bottom: 6px; /* makes the unselected tabs appear above the border */ } .ui-tabs .ui-tabs-nav li.ui-state-disabled a { color: #888 !important; cursor: default; } .ui-tabs .ui-tabs-panel { padding: 15px 10px; background-color: #fff; border: 1px solid #e5e5e5; border-radius: 0; overflow: hidden; }
Vejam no tamanho da TAB coloquei esse valor para que ela possa ficar expandida:
width:1100px;
Ainda não consegui deixar a imagem responsiva dentro das TAB´s mesmo seguindo a dica de deixar a div pai com percentagem.
div.responsivo
? JSFiddle