How to leave a responsive image

Navigation
28

I'm working on a site with a responsive feature and I have a promotions page and I would like the images to accompany the size change of the browser, the maximum size of the image is 1080px, following some companions' tips example shown separately works fine, but when I insert it into my Tabs it does not work, it looks like this: 


div#page {
    width: auto;
    text-align: center;
    padding: 40px 20px;
}
img {
    max-width: 100%;
}

The display code: 

<div id="page"> 
<img src="minhaimagem.png" alt="">

The page can be seen here:

Promotions Page

My TAB code looks like this: 

/* ---------------------------------------------------------------------- */
/* 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;
}

Look at the size of the TAB I put this value so that it can be expanded: 

width:1100px;

I still could not leave the responsive image inside the TABs even following the hint of leaving the parent div with percentage.

    
asked by anonymous 09.02.2015 / 12:59

2 answers

12

If you set the image to 100% wide, it will fit the size of the container it is in. If it is not within any container it will fit the page size. 

Dentro de container, container de tamanho 30% da largura total:
<div style="width:30%">
  <img src="https://i.stack.imgur.com/Q579U.jpg"style="width:100%">
</div>

Solta na página, pega a largura total da janela.
<img src="https://i.stack.imgur.com/Q579U.jpg"style="width:100%">
    
01.02.2017 / 13:32
13

Try using background-size as in the example below and check if the meta tag is defined in the site head: viewport 

.responsivo {
           max-width: 1080px;
           width: 100%;
           height: auto;
  }
  .responsivo img{
          max-width: 1080px;   /* Máximo da largura da imagem */
          width: 100%;
          max-height: 500px;  /* Máximo da altura da imagem */
          min-height: auto;      /* Mínimo da altura, por padrão “auto” */
          background-size:100%;
          background-repeat: no-repeat;
  }
    
09.02.2015 / 13:28
What are the standard sizes of android images? Algorithm for faster route calculation between two points in parallel Cartesian layers (3D)