ズームHTML

Question

BLOCKQUOTE

こんにちはすべてでズームアウト機能、で、それは、中にズームを追加し、このコードに機能をズームアウトすることが可能であるしてください？私はhtmlにはとてもフレッシュです。どんな助けもありがとう。

<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 84px; height: auto;" data-block-id="a3e059aa2efde6bb395d96de758538ef"> 
    <div class="sl-block-content" data-placeholder-tag="h2" data-placeholder-text="Title Text" style="text-align: left; z-index: 11;"> 
     <h2> 
      <span style="font-size:0.7em">Career Center Floor</span>&nbsp; 
     </h2> 
    </div> 
</div> 
<div class="sl-block" data-block-type="text" style="width: 413px; left: 29px; top: 231px; height: auto;" data-block-id="9d9bce75d195e9e223f5d8542e6441da"> 
    <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi nec metus justo. Aliquam erat volutpat." style="z-index: 13; text-align: left;"> 
     <ol> 
      <li class=""> 
       <span style="font-size:0.9em">Clients first come in contact with career coaches when they walk into the Career Center. ​​</span> 
      </li> 
      <li class=""> 
       <span style="font-size:0.9em">If they would love to use the computer, we confirm their information and provide them with their login credentials. </span> 
      </li> 
     </ol> 
    </div> 
</div> 
<div class="sl-block" data-block-type="image" style="width: 492px; height: 277px; left: 466px; top: 84px;" data-block-id="a7d2425befcc101a308007e77988f4af"> 
    <div class="sl-block-style" style="z-index: 12; transform: rotate(180deg);"> 
     <div class="sl-block-content" style="z-index: 12; border-style: solid; border-width: 1px;"> 
      <img style="" data-natural-width="2400" data-natural-height="1350" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156874/20170915_130043.jpg"/> 
     </div> 
    </div> 
</div> 
<div class="sl-block" data-block-type="text" data-block-id="a67966971a44247acc6d3c39c8e58444" style="height: auto; min-width: 30px; min-height: 30px; width: 600px; left: -134px; top: 35px;"> 
    <div class="sl-block-content" data-placeholder-tag="p" data-placeholder-text="Text" style="z-index: 14;"> 
     <p>Station # 1</p> 
    </div> 
</div> 
<div class="sl-block" data-block-type="image" data-block-id="a4223a242dc9a0bf9f41eca2258369d3" style="min-width: 30px; min-height: 30px; width: 486px; height: 322px; left: 466px; top: 360px;"> 
    <div class="sl-block-content" style="z-index: 15;"> 
     <img data-natural-width="584" data-natural-height="387" style="" data-lazy-loaded="" src="https://s3.amazonaws.com/media-p.slid.es/uploads/762662/images/4156885/f2c375d99f7def3cdccbec0cc2537cb1.jpg"/> 
    </div> 
</div> 

BLOCKQUOTE

Answer 1

var imagesize = $('img').width(); 
 
    
 
    $('.zoomout').on('click', function(){ 
 
     imagesize = imagesize - 5; 
 
     $('img').width(imagesize); 
 
    }); 
 
    
 
    $('.zoomin').on('click', function(){ 
 
     imagesize = imagesize + 5; 
 
     $('img').width(imagesize); 
 
    });

div {height:150px; width:150px; display:block; overflow:hidden; outline: 2px solid #777777; padding:20px;} 
 
img {width:150px;} 
 
button {font-size:10px; margin:10px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div><img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR_bKbC-4AX-6mG9oeROWNuXK4bKwhYloqxKqKSyiBH58lyuV8-Xg"/></div> 
 
<button class="zoomout">Zoom Out</button > <button class="zoomin">Zoom In</button >

Answer 2

あなたの期待される動作に応じて、（）関数のスケールを変換する簡単なCSSを使用することができます。あなたの例では

、あなたはおそらく私の例では代わりのdiv

.square { 
 
    width: 50px; 
 
    height: 50px; 
 
    border: 1px solid black; 
 
    display: inline-block; 
 
    margin: 20px; 
 
    transition: transform 0.5s; 
 
} 
 

 
.square:hover { 
 
    transform: scale(1.2); 
 
} 
 

 
.image1 { 
 
    background: black; 
 
} 
 

 
.image2 { 
 
    background: white; 
 
} 
 
    
 
.image3 { 
 
    background: red; 
 
} 
 

 
.image4 { 
 
    background: green; 
 
}

<div class="square image1"></div> 
 
<div class="square image2"></div> 
 
<div class="square image3"></div> 
 
<div class="square image4"></div>