Skip to main content
adicionou 2165 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Criei um exemplo que funciona com horizontal, vertical e ambos:

NotaNota¹: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Nota²: é necessário position:relative; para funcionar no Chrome, pois se não o cursor para redimensionar será sobreposto pelo iframe

Veja dois exemplos que criei, que funcionam com horizontal, vertical e ambos:

Primeiro exemplo:

Este funciona, mas no Chrome o iframe sobrepõe o aonde o cursor pode controlar o tamanho, o que faz não ser redimensionável, pois é como se ficasse por baixo do iframe, então usei calc(100% - 10px) para descontar a altura:

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: #ccc; /*esta cor é só para enxergar aonde esta o iframe e entender o exemplo, você pode trocar por transparent*/transparent;
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>
 

Segundo exemplo:Alternativa

Uma outra maneira de contornar oO unico problema do exemplo é que no Chrome cujoquando o iframe sobrepõefica pequeno o cursor é usando position: relative"cursor" para arrastar some quando o scroll aparece, no entantouma maneira de contornar isto seria descontando a imagem do cursor não muda (no Firefox o problema não ocorre)altura dos iframes, assim:

height: calc(100% - 14px);

Um exemplo:

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;calc(100% - 14px);
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Nota: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Veja dois exemplos que criei, que funcionam com horizontal, vertical e ambos:

Primeiro exemplo:

Este funciona, mas no Chrome o iframe sobrepõe o aonde o cursor pode controlar o tamanho, o que faz não ser redimensionável, pois é como se ficasse por baixo do iframe, então usei calc(100% - 10px) para descontar a altura:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: #ccc; /*esta cor é só para enxergar aonde esta o iframe e entender o exemplo, você pode trocar por transparent*/
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Segundo exemplo:

Uma outra maneira de contornar o problema no Chrome cujo o iframe sobrepõe o cursor é usando position: relative, no entanto a imagem do cursor não muda (no Firefox o problema não ocorre):

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Criei um exemplo que funciona com horizontal, vertical e ambos:

Nota¹: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Nota²: é necessário position:relative; para funcionar no Chrome, pois se não o cursor para redimensionar será sobreposto pelo iframe

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>
 

Alternativa

O unico problema do exemplo é que no Chrome quando o iframe fica pequeno o "cursor" para arrastar some quando o scroll aparece, uma maneira de contornar isto seria descontando a altura dos iframes, assim:

height: calc(100% - 14px);

Um exemplo:

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: calc(100% - 14px);
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>
adicionou 2165 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Veja um exemplodois exemplos que criei, que funcionam com horizontal, vertical e ambos:

Primeiro exemplo:

Este funciona, mas no Chrome o iframe sobrepõe o aonde o cursor pode controlar o tamanho, o que faz não ser redimensionável, pois é como se ficasse por baixo do iframe, então usei calc(100% - 10px) para descontar a altura:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
     background-color: #ccc; /*esta cor é só para enxergar aonde esta o iframe e entender o exemplo, você pode trocar por transparent*/
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Segundo exemplo:

Uma outra maneira de contornar o problema no Chrome cujo o iframe sobrepõe o cursor é usando position: relative, no entanto a imagem do cursor não muda (no Firefox o problema não ocorre):

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Veja um exemplo que criei com horizontal, vertical e ambos:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
     background-color: #ccc;
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Veja dois exemplos que criei, que funcionam com horizontal, vertical e ambos:

Primeiro exemplo:

Este funciona, mas no Chrome o iframe sobrepõe o aonde o cursor pode controlar o tamanho, o que faz não ser redimensionável, pois é como se ficasse por baixo do iframe, então usei calc(100% - 10px) para descontar a altura:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: #ccc; /*esta cor é só para enxergar aonde esta o iframe e entender o exemplo, você pode trocar por transparent*/
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Segundo exemplo:

Uma outra maneira de contornar o problema no Chrome cujo o iframe sobrepõe o cursor é usando position: relative, no entanto a imagem do cursor não muda (no Firefox o problema não ocorre):

.resize, .resize-v, .resize-h {
    position: relative;
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   background-color: transparent;
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
    background-color: #f00;
}

.resize-v {
    background-color: #00f;
}

.resize-h {
    background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>
Código revisado
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

Apesar da propriedade resize: não ser suportada no Firefox quando usado em iframes, como já dito na outra resposta que foi mencionado no MDN, ainda sim é uma propriedade que vai funcionar perfeitamente em alguns outros elementos.

Não é necessário nenhum hack ou biblioteca mirabolante para conseguir chegar no efeito desejado, basta criar uma <div> e nela você irá adicionar o resize: (recomendo adicionar o display: inline-block;), então coloque o tamanho que desejar e dentro do <div> coloque o seu <iframe>, definindo a largura e altura como 100%

Nota: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Veja um exemplo que criei com horizontal, vertical e ambos:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 200px;50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    overflowheight: hidden;200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
     background-color: #ccc;
   width: 100%;
   height: 100%;calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Apesar da propriedade resize: não ser suportada no Firefox quando usado em iframes, como já dito na outra resposta que foi mencionado no MDN, ainda sim é uma propriedade que vai funcionar perfeitamente em alguns outros elementos.

Não é necessário nenhum hack ou biblioteca mirabolante para conseguir chegar no efeito desejado, basta criar uma <div> e nela você irá adicionar o resize: (recomendo adicionar o display: inline-block;), então coloque o tamanho que desejar e dentro do <div> coloque o seu <iframe>, definindo a largura e altura como 100%

Nota: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Veja um exemplo que criei com horizontal, vertical e ambos:

.resize, .resize-v, .resize-h {
    display: inline-block;
    min-width: 200px;
    min-height: 200px;
    overflow: hidden;
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
   width: 100%;
   height: 100%;
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

Apesar da propriedade resize: não ser suportada no Firefox quando usado em iframes, como já dito na outra resposta que foi mencionado no MDN, ainda sim é uma propriedade que vai funcionar perfeitamente em alguns outros elementos.

Não é necessário nenhum hack ou biblioteca mirabolante para conseguir chegar no efeito desejado, basta criar uma <div> e nela você irá adicionar o resize: (recomendo adicionar o display: inline-block;), então coloque o tamanho que desejar e dentro do <div> coloque o seu <iframe>, definindo a largura e altura como 100%

Nota: é necessário adicionar o overflow: hidden ou overflow: auto ou overflow: scroll no elemento que deseja usar o resize:, exceto em elementos <textarea> que já tem scroll por padrão (exceto se usar overflow: visible;)

Veja um exemplo que criei com horizontal, vertical e ambos:

.resize, .resize-v, .resize-h {
    display: inline-block;
    overflow: hidden;
    min-width: 50px;  /* define largura minima */
    min-height: 50px; /* define altura minima */
    width: 200px;  /* define largura padrão/inicial */
    height: 200px; /* define altura padrão/inicial */
}

.resize-v {
   resize: vertical;
}

.resize-h {
    resize: horizontal;
}

.resize {
   resize: both !important; /*prioridade, acaso adicione resize com as outras classes*/
}

.resize > iframe,
.resize-v > iframe,
.resize-h > iframe {
     background-color: #ccc;
   width: 100%;
   height: calc(100% - 10px); /*é necessário descontar 10px da altura para que o iframe não bloqueie o div*/
   resize: none;
   border: none;
}

/* as cores abaixo são apenas para você diferenciar, pode remove-las */

.resize {
     background-color: #f00;
}

.resize-v {
     background-color: #00f;
}

.resize-h {
     background-color: #fc0;
}
<div class="resize">
    <iframe srcdoc="redimensiona vertical e horizontal"></iframe>
</div>

<hr>

<div class="resize-h">
    <iframe srcdoc="redimensiona horizontal"></iframe>
</div>

<hr>

<div class="resize-v">
    <iframe srcdoc="redimensiona vertical"></iframe>
</div>

adicionou 37 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 246 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
adicionou 32 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
Carregando