How to make image responsive

Asked

Viewed 71,704 times

37

I am working on a site with responsive feature and in it I have a promotions page and I would like the images to follow the browser size change, the maximum size of the image width is 1080px, following some tips of companions refiz the css and example displayed separately works correctly, but when inserting it in my Tabs the same does not work, it was like this:


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

The code to display:

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

The page can be seen here:

Page of Promotions:

My TAB code is 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 TAB s even following the tip to leave the parent div with percentage.

css
  • 1

    Do you use Bootstrap or something like Champs?

  • 1

    Hi @Edgar Muniz Berlinck, I don’t use bootstrap.

  • 1

    friend, would you like something similar to the one found on this page? http://foundation.zurb.com/docs/components/block_grid.html

  • 2

    Here worked. Maybe you forgot to finalize the div.responsivo? Jsfiddle

  • 1

    Hello Jsfiddle, yes div is closed.

  • 1

    @Oeslei, but the image behavior at resolutions greater than 1080px is strange, try to see your Jsfindle in full screen: http://jsfiddle.net/5sn5axcp/embedded/result/

  • 1

    @Tobymosque Why strange? You’re doing exactly what you expected.

  • 5

    @adventistapr My name is not Jsfiddle =) It’s just a link for you to check out a working example.

  • Hello @Oeslei, forgive the confusion, I think I copied and cheated without realizing.

  • https://answall.com/questions/151114/imagem-responsiva/235759#235759

Show 5 more comments

2 answers

21


If you set the image to 100% width it will adjust to the size of the container where it is. If you are not inside any container you will adjust to 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%">

  • Thanks for replying @Antonio Alexandre, helped a lot.

  • What a good Adventist! Glad to know! Great hug! :-)

  • In fact, the answer to your question is the use of Media Queries...

18

try using the background-size as in the example below and check if the meta tag is set at the head of the site: 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;
  }

  • Hello @Miguel Batista, thanks for the tip, the head of the site is not setting the tag, I made a test with the past code and nothing was changed.

  • 1

    Hello man, I made an example on the link http://jsfiddle.net/dte64k0v/ try to resize the image block. It is worth mentioning that the parent div should always use width in %;

  • 1

    Cool! I didn’t know that the background-size worked in the tag img

  • All you need to do is width: 100%. Is there any reason to put these background-xxx there?

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.