Criei um exemplo que funciona com horizontal, vertical e ambos:
NotaNota¹: é necessário adicionar o
overflow: hidden
ouoverflow: auto
ouoverflow: scroll
no elemento que deseja usar oresize:
, exceto em elementos<textarea>
que já tem scroll por padrão (exceto se usaroverflow: 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>