Растянуть изображение, чтобы вписаться в конкретный div

Question

У меня есть следующий div, который содержит изображение:

А вот HTML-код и стили к нему:

 <ul id="noty_centerRight_layout_container" class="i-am-new" style="right: 20px; position: fixed; width: 310px; height: auto; margin: 0px; padding: 0px; list-style-type: none; z-index: 10000000; top: 339.5px;">
   <li style="overflow: visible; border-radius: 5px; background-color: rgb(255, 255, 255); border-color: rgb(204, 204, 204); color: rgb(68, 68, 68); width: 310px; cursor: pointer; min-height: 349px;" class="animated bounceIn">
      <div class="noty_bar noty_type_alert" id="noty_4752181183881090">
         <div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative;">
            <div class="noty_text">
               <h3></h3>
               <p>                                                                                                                          <button title="Close (Esc)" type="button" class="popup-close">×</button></p>
               <p><a href="/half-price" target="_blank"><img style="width: 350px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"></a></p>
               <p></p>
            </div>
         </div>
      </div>
   </li>
</ul>

Я хочу сделать изображение равным размеру div с id

.

noty_677289985142816800 Кроме того, я добавил

Answer 1

Вы можете установить его в качестве фонового изображения для приведенной ниже ссылки div.

<div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative; background: url('https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png'); background-size: 100%; height: 220px;">
                    <div class="noty_text">
                        <h3></h3>
                        <p>
                            <button title="Close (Esc)" type="button" class="popup-close">×</button>
                        </p>
                        <p><a href="/half-price" target="_blank"><!-- <img style="width: 350px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"> --></a></p>
                        <p></p>
                    </div>
                </div>

css добавлено:

background: url('https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png'); 
background-size: 100%; 
height: 220px;

Answer 2

<ul id="noty_centerRight_layout_container" class="i-am-new" style="right: 20px; position: fixed; width: 310px; height: auto; margin: 0px; padding: 0px; list-style-type: none; z-index: 10000000; top: 339.5px;">
<button title="Close (Esc)" type="button" class="popup-close">×</button> 
   <li style="overflow: visible; border-radius: 5px; background-color: rgb(255, 255, 255); border-color: rgb(204, 204, 204); color: rgb(68, 68, 68); width: 310px; cursor: pointer; min-height: 349px;" class="animated bounceIn">
      <div class="noty_bar noty_type_alert" id="noty_4752181183881090" style="background-color:blue;">
         <div class="noty_message pop-activity default-yellow" style="font-size: 13px; line-height: 16px; text-align: left; padding: 15px; width: auto; position: relative;">
            <div class="noty_text">
               <p><a href="/half-price" target="_blank"><img style="width:310px;margin-top:-28px;margin-left:-15px;height:311px;" src="https://img.alleop.bg/catalog/Banners-Front/Popup-Product-banners/IMG_27082018_165243_0.png"></a></p>
               <p></p>
            </div>
         </div>
      </div>
   </li>
</ul>

попробуйте этот код.