オーバーフローを使用しているときに部品表示の画像をスキップする方法：隠しですか？

Question

私は "もっと読む"機能をしようとしています。
私はoverflow: hiddenを使用して、divより大きいコンテンツを非表示にします。私は、部分的に示したされた画像をスキップしたい
：よう
結果が今に見えます。
このように：
カウンタ画像の場合、画像全体をスキップします。
「もっと読む」ボタンをクリックすると、すべての内容が表示されます。 どうすればいいですか？

マイコード：

.post { 
 
    width: 800px; 
 
    height: 300px; 
 
    overflow: hidden; 
 
    background-color: #F6F8FA; 
 
    border-style: ridge; 
 
    border-width: 2px; 
 
    border-color: #F6F8FA; 
 
    padding: 15px; 
 
    margin-bottom: 30px; 
 
    margin-left: 5px; 
 
    margin-top: 30px; 
 
} 
 

 
.published-date { 
 
    float: right; 
 
}

<div class="post"> 
 
    <p class="published-date">published: Aug. 29, 2017, 12:19 p.m.</p> 
 
    <h1> 
 
    <a href="{% url 'post_detail' pk=post.pk %}"> 
 
     <!--post.title--> 
 
     <u>[Django] 預設登入admin</u> 
 
    </a> 
 
    </h1> 
 
    <p> 
 
    <!--post.text--> 
 
    <p>在Django中，想要新增一個post，但卻還沒登入到admin時，或是admin中沒有你的帳號密碼時，你可能會得到瀏覽器回應這樣的錯誤： </p> 
 
    <p><img alt="" src="http://i.imgur.com/4cJUlK7.png?3" /> 
 
     <br></p> 
 
    <p>手動登入admin（localhost:8000/admin）可能可以解決這個問題： </p> 
 
    <p><img alt="" src="http://i.imgur.com/Xfbghkx.png" /> 
 
     <br><br></p> 
 
    <p>這時候如果能夠每次都自動登入，就會方便很多。<br /> 而Django在 <code>django.contrib.auth</code> 也提供了<a href="https://docs.djangoproject.com/en/1.11/topics/auth/default/">一些方法</a><br /> 以下條件預設登入的user只會有一個（就是我） 
 
     <br /> 
 
     <br> 新增一個 <code>user.py</code> </p> 
 
    <div class="codehilite"> 
 
     <pre><span></span><span class="k">class</span> <span class="nc">UserInfo</span><span class="p">():</span> 
 
    <span class="n">username</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">username</span><span class="p">}</span> 
 
    <span class="n">password</span> <span class="o">=</span> <span class="p">{</span><span class="n">enter</span> <span class="n">your</span> <span class="n">password</span><span class="p">}</span> 
 
</pre> 
 
    </div> 
 

 

 
    <p><br> 在 <code>views.py</code> 中，import <code>authenticate</code> , <code>login</code> 。記得也要將自己的user資訊加進來：</p> 
 
    <div class="codehilite"> 
 
     <pre><span></span><span class="kn">from</span> <span class="nn">django.contrib.auth</span> <span class="kn">import</span> <span class="n">authenticate</span><span class="p">,</span> <span class="n">login</span> 
 
<span class="kn">from</span> <span class="nn">.user</span> <span class="kn">import</span> <span class="n">UserInfo</span> 
 
<span class="k">def</span> <span class="nf">post_list</span><span class="p">(</span><span class="n">request</span><span class="p">):</span> 
 
    <span class="n">user</span> <span class="o">=</span> <span class="n">authenticate</span><span class="p">(</span><span class="n">username</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">username</span><span class="p">,</span> <span class="n">password</span> <span class="o">=</span> <span class="n">UserInfo</span><span class="o">.</span><span class="n">password</span><span class="p">)</span> 
 
    <span class="n">login</span><span class="p">(</span><span class="n">request</span><span class="p">,</span> <span class="n">user</span><span class="p">)</span> 
 

 
    <span class="p">{</span><span class="o">...</span><span class="n">your</span> <span class="n">code</span><span class="p">}</span> 
 
</pre> 
 
    </div> 
 

 

 
    <p><br> 在程式執行到 <code>post_list()</code> 的時候就會自動登入，屢試不爽。</p> 
 
    <p><br><br> 這樣的寫法把user的帳密分開成一個檔案寫，若要提交到遠端repo，可以直接略過（.gitignore）含有user資訊的檔案，以免公開。 
 
    </p> 
 
    </p> 
 
    <a href="/post/32/"></p> 
 
    <a href="{% url 'post_detail' pk=post.pk %}"> 
 
     <button type="button" class="show-more-btn">more...</button> 
 
    </a> 
 
    <!--end post.text--> 
 
</div>

post.titleとpost.textは、タイトルとテキストの内容です。

Answer 1

これはjquery関数で実行できます。

$('.show-more-btn').click(function(){ 
    $('.post').animate({height:'100%'}, 500); 
}); 

あなたが「もっと...」ボタンをクリックすると、基本的に、あなたは.post

にheight:100%を追加するには、以下の例を参照してください。

https://jsfiddle.net/st6ys7tt/9/