Templates de Imagens em ASP.NET

B

BrunoGomes_PT

Power Member
Boas,
estou a trabalhar num projeto em ASP.NET e precisava de fazer uma página em que pudesse ter diferentes templates/esquemas com imagens carregadas de uma base de dados. Por exemplo: conseguir criar um template em que tenha 3 imagens em cima, uma de cada lado e outra em baixo, criar outro com duas de cada lado e outra em cima, etc. E ao mesmo tempo puder fazer crop(cortar) em cada uma das imagens.
Qual a melhor forma de fazer isto? Espero me ter explicado bem.
 
Float left, float right, clear both... nunca usei o ASP.NET, por isso não faço a minima idea como é. Mas tipo, o template que falas da para fazer em 5-10 mins.
A parte do crop:
1 - Crias um DIV com overflow hidden;
2 - Dentro do DIV poes IMG, com posibilidade de mover com o rato;
3 - Adicionas JavaScript para poderes fazer resize da imagem e colocar no sitio pretendido.

Ta-da. Não fazes crop, mas com o overflow hidden basicamente teras a mesma cena.
Acredito que tambem possas fazer crop, mas isso tens de ver com JS... sei que da para fazer em PHP, mas não assim... so se com AJAX, mas sera uma complicação desnecessaria, por isso aconcelho procurares a resolução com o JS.
 
KeyBi disse:
Float left, float right, clear both... nunca usei o ASP.NET, por isso não faço a minima idea como é. Mas tipo, o template que falas da para fazer em 5-10 mins.
A parte do crop:
1 - Crias um DIV com overflow hidden;
2 - Dentro do DIV poes IMG, com posibilidade de mover com o rato;
3 - Adicionas JavaScript para poderes fazer resize da imagem e colocar no sitio pretendido.

Ta-da. Não fazes crop, mas com o overflow hidden basicamente teras a mesma cena.
Acredito que tambem possas fazer crop, mas isso tens de ver com JS... sei que da para fazer em PHP, mas não assim... so se com AJAX, mas sera uma complicação desnecessaria, por isso aconcelho procurares a resolução com o JS.
Clicar para expandir...
Obrigado, mas podes explicar mais pormenorizadamente a primeira parte?
 
Uma coisa muito basica, mas é basicamente o template 2 em cima uma em baixo.
E podes fazer drag as imagens para centrar.

Código: 
<!doctype html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport"
         content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Kitties</title>
   <style>
      * {
         padding: 0;
         margin: 0;
      }

      div {
         overflow: hidden;
         height: 40vw;
      }

      .picture {
         width: 100%;
      }

      .left {
         float: left;
         width: 49vw;
      }

      .right {
         float: right;
         width: 49vw;
      }

      .bottom {
         float: left;
         width: 100vw;
         margin: 10px 0 0;
      }
   </style>
   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
   <script>
      $( function() {
         $( ".picture" ).draggable();
      } );
   </script>
</head>
<body>
<div class="left">
   <img class="picture" src="https://blogs.warwick.ac.uk/images/csuedz/2005/01/10/kitten06.jpg" alt="Kittie.jpg">
</div>
<div class="right">
   <img class="picture" src="https://pbs.twimg.com/profile_images/823940601536245760/MVp8OTwk.jpg" alt="Kittie.jpg">
</div>
<div class="bottom">
   <img class="picture" src="https://assets.rbl.ms/4155639/980x.jpg" alt="Kitties.jpg">
</div>
</body>
</html>
 
Inicie sessão ou registe-se para poder participar.
Back
Topo