Я бы рекомендовал использовать модуль подпроцесса вместо os.system, потому что для него выполняется экранирование оболочки и, следовательно, гораздо безопаснее: http://docs.python.org/library/subprocess.html
subprocess.call(['ping', 'localhost'])
В соответствии с значениями CSS-изображений и заменяемым модулем содержимого уровня 3 , свойство object-fit
требует высоты и ширины .
5.5. Объекты определения размера: свойство
object-fit
Свойство
blockquote>object-fit
определяет, как содержимое заменяемого элемента должно быть помещено в блок, установленный его используемыми высотой и шириной .В этом случае в вашем коде отсутствует спецификация свойства
height
. Пожалуйста, попробуйте этот код.
.theme-color-text { position: relative; } .theme-color-text::before { margin-top: 10px; display: block; content: ""; padding-top: 100%; } .image { width: 100%; border-radius: 10px; margin-top: 10px; object-fit: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; height: 100%; /* Add the specification of the `height` property. */ }
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" /> <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/js/bootstrap.min.js"></script> <div class="container"> <div class="row"> <div class="col-6 col-md-4 col-lg-3"> <div class="row post"> <a href="#" class="theme-color-text w-100"> <img src="https://placeimg.com/600/500/animals" class="image"> <!-- correct --> </a> </div> <div class="row post-detail"> <div class="col-auto"> <i class="fas fa-heart"></i> </div> <div class="col-auto"> <i class="fas fa-eye"></i> </div> <div class="col-12 comment-area"> text </div> </div> </div> <div class="col-6 col-md-4 col-lg-3"> <div class="row post"> <a href="#" class="theme-color-text w-100"> <img src="https://placeimg.com/150/50/animals" class="image"> <!-- incorrect --> </a> </div> <div class="row post-detail"> <div class="col-auto"> <i class="fas fa-heart"></i> </div> <div class="col-auto"> <i class="fas fa-eye"></i> </div> <div class="col-12 comment-area"> text </div> </div> </div> <div class="col-6 col-md-4 col-lg-3"> <div class="row post"> <a href="#" class="theme-color-text w-100"> <img src="https://placeimg.com/50/25/animals" class="image"> <!-- incorrect --> </a> </div> <div class="row post-detail"> <div class="col-auto"> <i class="fas fa-heart"></i> </div> <div class="col-auto"> <i class="fas fa-eye"></i> </div> <div class="col-12 comment-area"> text </div> </div> </div> </div> </div>